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

IT技术 javascript
2021-03-17 16:45:24

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

6个回答

这是一个纯 Javascript 替代方案:

var mydiv = document.getElementById("myDiv");
var aTag = document.createElement('a');
aTag.setAttribute('href',"yourlink.htm");
aTag.innerText = "link text";
mydiv.appendChild(aTag);
想要在功能区上添加超链接。我能够将超链接添加到现有的 div。对于我在页面上执行的每一个操作,超链接都会增加一个。我怎样才能让它(超链接)限制为一个?
2021-04-20 16:45:24
我不知道这样做时我出了什么问题,但它不起作用并且没有向 div 添加任何项目!任何的想法?
2021-04-28 16:45:24
对不起,我编辑了它。我在 appendChild 中切换了 mydiv 和 aTag。再试一次。这是一个演示:jsfiddle.net/ducondez/mbTnH
2021-04-28 16:45:24
我会使用innerText属性而不是innerHTML,因为它在 XSS 方面更安全。并不是说这里有问题,但是如果 OP 将要动态加载链接文本,最好是安全的。
2021-05-01 16:45:24
“向后更新”:在 2010 年stackoverflow.com/a/22990890/988591 的这个公认答案中,据说这innerText是“'旧的 Internet Explorer' 的做法”,textContent应该改用它。我添加了这个是因为在 Firefox 上innerText似乎对我不起作用..
2021-05-07 16:45:24

我建议您为此使用jQuery,因为它使过程更容易。下面是一些使用 jQuery 的例子:

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

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

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

ul.append('<li><a href="' + url + '">' + text + '</a></li>');
Jquery 使用 javascript.. 我同意使用 Jquery 在这里更容易阅读。
2021-05-05 16:45:24
Jquery 不是 java 脚本!
2021-05-06 16:45:24
这不能回答问题。
2021-05-15 16:45:24
var newA = document.createElement('a');
newA.setAttribute('href',"http://localhost");
newA.innerHTML = "link text";
document.appendChild(newA);
<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>

另一个变体在不需要 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
};

谢谢您的帮助。