How to add anchor tags dynamically to a div in Javascript?

Question

How to add a list of hyperlinks (with their events and properties) dynamically to a div in Javascript?

Caucasus

Answer 1

here's a pure Javascript alternative:

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

Gans

I'd use the innerText attribute instead of innerHTML, as it's safer when it comes to XSS. Not that there's a problem right here, but if OP is going to load link texts dynamically it's better to be on the safe side. – Herzegovina

I don't know what goes wrong with me when I do that, but it doesn't work and no items are added to the div! Any idea? – Caucasus

sorry i edited it. i switched mydiv and aTag in appendChild. try it again. here's a demo: jsfiddle.net/ducondez/mbTnH – Gans

want to add a hyperlink on the ribbon. I was able to add the hyperlink to the existing div. The Hyperlinks are getting increased by one for every action i do on the page. How i can make it(hyperlink) restrict to one? – Waist

"backward update": in this accepted answer from 2010 https://mcmap.net/q/354697/-why-is-innertext-not-working-in-firefox-duplicate it is said that innerText is "the 'old Internet Explorer' way of doing it" and that textContent should be used instead. I added this because on Firefox innerText seems not to be working to me.. – Moreta

myDiv being the element's name? – Snowblink

instead of inner html it's better to create a text node and append it, nevertheless up-voted – Libretto

Answer 2

I recommend that you use jQuery for this, as it makes the process much easier. Here are some examples using jQuery:

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

If you need a list though, as in a <ul>, you can do this:

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

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

Histogram

Jquery uses javascript.. I agree that using Jquery is much easier to read here. – Bobo

Jquery is not java script! – Lorenzo

This doesn't answer the question. – Trichome

Answer 3

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

Ascensive

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>

Gowen

Answer 5

With jquery

  $("div#id").append('<a href=#>Your LINK TITLE</a>')

With javascript

   var new_a = document.createElement('a');
   new_a.setAttribute("href", "link url here");
   new_a.innerHTML = "your link text";
   //add new link to the DOM
   document.appendChild(new_a);

Corabelle

Answer 6

var a = document.createElement('a');
a.target = '_blank';
a.href = '/solution_code/ + solution_code.id'
a.innerText = "Soution Code";
var container = document.getElementById('solution-code');
container.appendChild(a);
container.appendChild(document.createElement('br'));

Stung

Answer 7

One more variation wrapped up nicely where setAttribute isn't needed.

There are 3 lines that wouldn't be needed if Wetfox could dry off.

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
};

Thanks for the help.

Testee