oujood.com

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

Cet article explique comment créer dynamiquement une balise d'ancrage en JavaScript et jQuery.
Comment générer dynamiquement une balise d'ancrage avec JavaScript/jQuery

chercher |

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




Voir aussi nos tutoriel :

HTML5 élément canvas

HTML5 élément canvas Dessiner avec l\rélément canvas

direction

Spécifie l'orientation du texte / écriture direction

Référence des filtre de php

Référence des filtre de php