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

User · Answer

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>');

User · Answer

lt script type  text javascript  language  javascript  gt  function createDiv       var divTag   document createElement  div                  divTag innerHTML    Div tag created using Javascript DOM dynamically             document body appendChild divTag      lt  script gt

User · Answer

With jquery      quot div id quot   append   lt a href   gt Your LINK TITLE lt  a gt     With javascript    var new a   document createElement  a       new a setAttribute  quot href quot    quot link url here quot       new a innerHTML    quot your link text quot        add new link to the DOM    document appendChild new a

User · Answer

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

User · Answer

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

User · Answer

var newA   document createElement  a    newA setAttribute  href   http   localhost    newA innerHTML    link text   document appendChild newA

[javascript] How to add anchor tags dynamically to a div in Javascript?

Examples related to javascript