使用JavaScript(appendChild)将新元素添加到DOM中

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是两个不标准和臭名昭著的越野车.