Comment créer un lien à l'aide de JavaScript?
Pourquoi avez-vous besoin de créer des liens avec JavaScript
HTML vous permet de mettre des liens à l'intérieur de la balise d'ancrage sous l'attribut HREF. Cependant, tout en développant une application JavaScript où vous devez gérer tout par programme, vous devez créer des liens dynamiquement et les attribuer à l'attribut HREF de la balise d'ancrage HTML.
C'est la principale raison pour laquelle vous avez besoin de JavaScript pour créer un lien et c'est ce dont nous allons parler dans cet article, alors faisons une plongée profonde sur la façon dont nous pouvons facilement créer un lien en utilisant JavaScript.
Approche pour créer un lien
Pour créer un lien par programme, nous comprenons d'abord ce que nous devons faire exactement.
Tout d'abord, nous devons créer une balise d'ancrage en utilisant JavaScript:
Créer une balise d'ancrage
Pour créer une ancre, nous pouvons utiliser le code fourni ci-dessous. Créez un élément (balise) et attribuez-le à la variable nommée «Anchor» comme nous en aurons besoin plus tard:
Après avoir créé la balise d'ancrage, nous devons écrire du texte à l'intérieur de la balise comme démontré ci-dessous:
Site Web de LinuxhintÉcrire du texte dans la balise
Pour écrire du texte à l'intérieur de la balise, créez d'abord un nœud de texte, puis ajoutez ce nœud de texte en tant qu'enfant à la balise d'ancrage. Le code pour écrire du texte dans la balise d'ancrage ira comme ceci:
Laissez TextNode = document.CreateTextNode ("site Web LinuxHint");
// Ajouter le TextNode en tant qu'enfant pour ancrer.
ancre.APPENDCHILD (TextNode);
À ce stade, le texte est ajouté dans la balise d'ancrage. Maintenant, nous devons mettre le lien dans l'attribut HREF de la balise d'ancrage comme indiqué ci-dessous.
Site Web de LinuxhintDéfinir l'attribut HREF de la balise
Pour mettre le lien dans l'attribut HREF de TAG, la ligne suivante de code JavaScript sera utilisée:
Après avoir réglé le href Attribut, la seule chose qui reste est d'ajouter la balise où nous voulons qu'elle soit mise.
Ajoutez la balise au corps HTML
Pour ajouter la balise d'ancrage au corps, utilisez la ligne de code suivante.
D'accord, vous avez appris toute la procédure pour créer un lien à l'aide de JavaScript. Passons un exemple pour démontrer les résultats.
Exemple
Prenons un exemple simple où nous allons simplement créer un lien et l'ajoutons au corps HTML et vérifiera le comportement du lien s'il fonctionne ou non.
Html
Tout d'abord, nous créerons un bouton et au clic sur ce bouton, la méthode CreateLink () sera appelée.
Javascrip
Tout le code de création du lien sera écrit à l'intérieur du CreateLink () La fonction et l'ensemble du code JavaScript se déroulent comme ceci:
Laissez Anchor = document.CreateElement ('A');
Laissez Link = document.CreateTextNode ("site Web LinuxHint");
ancre.APPENDCHILD (lien);
ancre.href = "https: // linuxhint.com / ";
document.corps.Annexe (ancre);
Une fois que tout est en ordre et prêt à être exécuté, vérifions ceci et exécutons le code.
Sortir
Cliquez sur le bouton et voyez s'il crée réellement le lien pour nous ou non.
Ici, dans l'écran ci-dessus, vous pouvez voir qu'après avoir cliqué sur le bouton, le lien a été créé avec succès et affiché sur notre page Web. Ce lien a abandonné l'adresse de Linuxhint.com qui signifie que si vous cliquez dessus, vous serez dirigé vers Linuxhint.com.
N'oubliez pas que nous avons ajouté le lien dans notre code javascript, c'est pourquoi il apparaît en dessous de tout. Alors maintenant, si vous souhaitez constituer le lien vers le haut d'un élément HTML ou en haut de la page, appliquez simplement la balise d'ancrage au lieu de l'ajoutant au corps pour atteindre cet objectif.
Présentez la balise
Le seul changement dont nous avons besoin est d'utiliser "document.corps.Présenter " au lieu de "document.corps.ajouter" Pour appliquer la balise d'ancrage en haut de la page au-dessus de chaque élément.
Sortir
Comme vous pouvez le voir ci-dessus, le lien a été admis au-dessus de chaque élément HTML et est cliquable avec l'adresse qui lui est attachée.
Conclusion
Le lien peut facilement être créé via JavaScript en créant d'abord une balise utilisant la méthode CreateElement () et plus tard, le lien peut être attaché à l'attribut HREF de la balise. Ce message a fourni la fonction complète pour créer un lien totalement via JavaScript sans toucher le HTML. De plus, nous avons discuté de la façon d'ajouter ou de constituer la balise d'ancrage «» au corps en utilisant des exemples détaillés.