Détermine si une variable est un type numérique
Apprenez à créer dynamiquement des liens hypertextes en JavaScript et jQuery, avec des exemples détaillés pour développer vos compétences en programmation web.
Comment générer dynamiquement une balise d'ancrage avec JavaScript/jQuery
<!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 :
<!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.
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>`); }) });
- | Accueil | - |