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

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

Answer 1

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

Answer 2

请注意，innerHTML既是非标准的又是出了名的buggy。

Answer 3

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

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

Answer 4

如果你没有添加很多东西，你一直在做的方式与innerHTML相比是理想的。如果您经常这样做，您可能只是创建一个通用函数/对象，它将相关信息作为参数并进行脏操作。 IE

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

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

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

4 个答案: