web-dev-qa-db-fra.com

Création dynamique de balises d'ancrage en HTML à l'aide de JavaScript

J'ai une question sur les balises d'ancrage et javascript. Conversion d'une URL en balise d'ancrage

La zone de texte accepte une URL (par exemple, "www.youtube.com").

J'ai créé une fonction Javascript qui ajoute "http: //" au lien.

Comment puis-je faire pour que le bouton de conversion ajoute un lien sur la page Web qui vous emmène au site Web dans un autre onglet.

Mon code Javascript est le suivant:

var webpage="";
var url="";
var message="";
var x= 0;
var page="";

function convert()
{       
    url=document.getElementById("link").value;
    webpage = "http://" + url;  
}
javascripthtmldomchild-nodes
8
Kyle Goertzen

Vous pouvez générer les éléments et leur appliquer les attributs nécessaires. Ajoutez ensuite le nouveau lien au paragraphe de sortie.

function generate() {
    var a = document.createElement('a');
    
    a.href = 'http://' + document.getElementById('href').value;    
    a.target = '_blank';
    a.appendChild(document.createTextNode(document.getElementById('href').value));
    document.getElementById('link').appendChild(a);
    document.getElementById('link').appendChild(document.createElement('br'));
}
Link: <input id="href"> <button onclick="generate()">Generate</button>
<p id="link"></p>

4
Nina Scholz

function addLink()
{       
    var url = document.getElementById("link").value;
    var webpage = "http://" + url;
    
    var a = document.createElement("a");                 // create an anchor element
    a.href = webpage;                                    // set its href
    a.textContent = url;                                 // set its text
    
    document.getElementById("container").appendChild(a); // append it to where you want
}
a {
  display: block;
}
<div id="container"></div>
<br><br>
<input id="link"/><button onclick='addLink()'>ADD</button>

0
ibrahim mahrir

Je suppose que vous savez écrire du code JavaScript, je ne vais donc pas y aller. Le problème consiste à comprendre l'attribut target d'une balise <a>.

W3Schools: Attribut cible

0
Anthony Rutledge

Vous pouvez simplement le faire en ajoutant une balise d'ancrage de manière dynamique

var mydiv = document.getElementById("myDiv");
var aTag = document.createElement('a');
aTag.setAttribute('href',webpage);
aTag.innerHTML = "link text";
mydiv.appendChild(aTag);

S'il vous plaît jeter un oeil ici pour plus de références

Comment ajouter des tags d'ancrage dynamiquement à un div en Javascript?

0
RupamDotInfo