使用JavaScript将新元素添加到DOM中（appendChild）

我有时需要向现有的HTML页面添加元素（例如新的链接和图像），但我只能访问远离我的页面的一小部分需要插入元素。我想使用基于DOM的JavaScript技术，并且我必须避免使用document.write（）。使用JavaScript将新元素添加到DOM中（appendChild）

到目前为止，我一直在使用这样的事情：

// Create new image element 
var newImg = document.createElement("img"); 
    newImg.src = "images/button.jpg"; 
    newImg.height = "50"; 
    newImg.width = "150"; 
    newImg.alt = "Click Me"; 
// Create new link element 
var newLink = document.createElement("a"); 
    newLink.href = "/dir/signup.html"; 
// Append new image into new link 
newLink.appendChild(newImg); 
// Append new link (with image) into its destination on the page 
document.getElementById("newLinkDestination").appendChild(newLink);

有，我可以用它来完成同样的事情更有效的方法？这一切似乎都是必要的，但我想知道是否有更好的方法可以做到这一点。

来源

2010-06-02 KatieK

有一种更有效的方法，并且如果可能的话，似乎正在使用documentFragments。查看：http://ejohn.org/blog/dom-documentfragments/。同样，这种方式应该比起开始混合巨大的字符串文字并将它们设置为其他DOM对象的innerHTML更容易出错并且更易于维护。

来源

2010-06-03 03:33:44 Matias

谢谢！我会检查一下我的下一个项目。 – KatieK 2010-06-03 16:50:13

+1因为John Resig。 – 2012-09-10 01:16:07

没有错。使用innerHTML的速度会稍微快一些，可能会少些字符，但对于这种规模的东西来说并不明显，而且我个人偏好的是更标准，统一支持和更安全的DOM方法和属性。

一个小点：<img>元素的height和width属性应该是数字而不是字符串。

来源

2010-06-02 22:48:16

感谢有关高度和宽度的提示。这很有道理。 – KatieK 2010-06-03 16:50:55

如果你不添加很多东西，你一直在做的方式是理想vs innerHTML。如果你经常这样做，你可能只需创建一个通用函数/对象，将相关信息作为参数并执行肮脏的工作。 IE

function addImage(src,width,height,alt,appendElem,href) {...}

我经常在我自己的项目中使用原型来节省时间。

来源

2010-06-02 23:07:33 edl

只要当心，那innerHTML是非标准的和臭名昭着的buggy。

来源

2010-06-03 01:53:23 dplass

哇，我不知道'innerHTML'是越野车！感谢您的提醒。 – 2012-09-10 01:15:15

+1 IE9不支持用于选择的innerHTML – 2012-11-22 18:40:16

使用JavaScript将新元素添加到DOM中（appendChild）

回答

相关问题