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

Question

Comment ajouter dynamiquement une liste d'hyperliens (avec leurs événements et propriétés) à un div en Javascript ?

Answer 1

Voici une alternative en Javascript pur :

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

Answer 2

Je vous recommande d'utiliser jQuery pour cela, car cela rend le processus beaucoup plus facile. Voici quelques exemples utilisant jQuery :

$("div#id").append('<a href="' + url + '">' + text + '</a>');

Si vous avez besoin d'un liste bien que, comme dans un <ul> vous pouvez le faire :

$("div#id").append('<ul>');
var ul = $("div#id > ul");

ul.append('<li><a href="' + url + '">' + text + '</a></li>');

Answer 3

var newA = document.createElement('a');
newA.setAttribute('href',"http://localhost");
newA.innerHTML = "link text";
document.appendChild(newA);

Answer 4

<script type="text/javascript" language="javascript">
function createDiv()
{
  var divTag = document.createElement("div");            
  divTag.innerHTML = "Div tag created using Javascript DOM dynamically";        
  document.body.appendChild(divTag);
}
</script>

Answer 5

Une autre variation bien emballée où setAttribute n'est pas nécessaire.

Il y a 3 lignes qui ne seraient pas nécessaires si Wetfox pouvait sécher.

var saveAs = function (filename, content) {
    if(filename === undefined) filename = "Unknown.txt";
    if(content === undefined) content = "Empty?!";
    let link = document.createElement('a');
    link.style.display = "none"; // because Firefox sux
    document.body.appendChild(link); // because Firefox sux
    link.href = "data:application/octet-stream," + encodeURIComponent(content);
    link.download = filename;
    link.click();
    document.body.removeChild(link); // because Firefox sux
};

Merci pour votre aide.