使用JavaScript向DOM添加新元素（appendChild）

Question

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

到目前为止，我一直在使用类似以下的方法：

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

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

- KatieK

Answer 1

有一种更高效的方法，似乎可以使用文档片段（documentFragments）。

请查看这个链接：http://ejohn.org/blog/dom-documentfragments/。此外，这种方法应该比开始混合大量字符串文字并将它们设置为其他DOM对象的innerHTML更少出错，并且更易于维护。

- mati

---

谢谢！我会在我的下一个项目中查看这个。 - KatieK

Answer 2

请注意，innerHTML既不标准化，也极易出现错误。

- dplass

---

哇，我不知道 innerHTML 有 bug！谢谢你提醒我。 - Camilo Martin

Answer 3

这没问题。使用 innerHTML 可能会稍微快一点，字数也可能更少，但在这个规模下几乎不会被注意到。我个人更喜欢更标准、支持更统一、更安全的 DOM 方法和属性。

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

- Tim Down

---

谢谢你提供有关高度和宽度的提示。这很有道理。 - KatieK

Answer 4

如果你不添加太多东西，那么你一直以来的做法比innerHTML理想。但是如果你经常这样做，你可能需要创建一个通用的函数/对象，将相关信息作为参数传递，并完成相应的工作。例如：

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

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

- edl