1. Utilisation de JavaScript pour créer dynamiquement un lien
Dans JavaScript, vous pouvez utiliser la méthode document.createElement(), qui crée de manière automatique l'élément HTML spécifié.L'exemple ci-dessous crée une nouvelle balise d'ancrage avec les attributs souhaités et l'ajoute à un élément div à l'aide de la méthode Node.appendChild().
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Générer un lien hypertexte</title>
<style>
a{
text-decoration: none;
color: red;
font-size: 2em;
}
</style>
</head>
<body>
<h1>Générer un lien hypertexte</h1>
<div id="container"></div><br>
<div>
<button id="generate">Générer le lien</button>
</div>
<script>
document.getElementById('generate').onclick = function() {
var a = document.createElement('a');
a.href = 'https://www.oujood.com/';
a.title="titre du lien";
a.innerText = 'Visiter le site oujood.com';
a.target = '_blank';
var container = document.getElementById('container');
container.appendChild(a);
container.appendChild(document.createElement('br'));
}
</script>
</body>
</html>
Dans cet exemple nous avons créé un élément a avec les attributs :- href attribut obligatoire pour définir l’URL du lien.
- title attribut obligatoire pour définir un titre pour le lien , il sera affiché au survole du lien par la souri - Le texte du lien il sera affiché sur la page web.
- Un attribut target target pour dire comment ouvrir la page dans notre cas la valeur de l’attribut '_blank' ouvre la page dans un nouvel anglet.
2. Utilisation de jQuery pour créer dynamiquement un lien
Avec jQuery, vous pouvez utiliser la méthode .append() pour ajouter la balise d'ancrage à la fin de l'élément div spécifié.Exemple la méthode .append() est illustrée ci-dessous :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Générer un lien hypertexte</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#generate').click(function() {
$('#container').append(
$(document.createElement('a')).prop({
href: 'https://www.oujood.com/',
title: 'visitez le site oujood.com',
innerText: 'visitez le site oujood.com',
target: '_blank',
})
).append(
$(document.createElement('br'))
);
})
});
</script>
<style>
a{
text-decoration: none;
color: red;
font-size: 2em;
}
</style>
</head>
<body>
<h1>Générer un lien hypertexte</h1>
<div id="container"></div><br>
<div>
<button id="generate">Générer le lien</button>
</div>
</body>
</html>
Nous avons repris le même exemple mais en utilisant jQuery.Vous pouvez aussi choisir une version plus courte :
Code javascript Copier le code
$(document).ready(function() {
$('#generate').click(function() {
var url = 'https://www.oujood.com/';
var text = 'Vitez le site oujood.com';
$("#container").append(`<a href="${url}" target="_blank" title="${text}">${text}</a>`);
})
});
Voir aussi : Insérer une image avec Javascript
| - | Accueil | - |
La méthode secrète likes sans fin sur Facebook
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
