如何在Javascript中动态地将锚标签添加到div?

时间:2011-04-01 23:00:18

标签: javascript

如何在Javascript中动态地将超链接列表(及其事件和属性)添加到div中?

7 个答案:

答案 0 :(得分:78)

这是一个纯粹的Javascript替代方案:

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

答案 1 :(得分:14)

我建议您使用jQuery,因为这样可以更轻松地完成此过程。以下是使用jQuery的一些示例:

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

如果你需要一个列表,就像<ul>一样,你可以这样做:

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

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

答案 2 :(得分:1)

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

答案 3 :(得分:0)

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

答案 4 :(得分:0)

在需要setAttribute的地方,还有一个很好的变化。

如果Wetfox可以干掉,就不需要3条线。

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

感谢您的帮助。

答案 5 :(得分:0)

使用 jquery

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

使用 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);

答案 6 :(得分:0)

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