OUJOOD.COM
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 | - |