logo oujood
🔍

Comment insérer un lien hyper texte en utilisant javascript ou jQuery

Comment générer dynamiquement une balise d'ancrage avec JavaScript/jQuery

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().

   📝  Copier le code 

<!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 :

   📝  Copier le code 

<!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 -