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

【问题标题】：Adding new elements into DOM using JavaScript (appendChild)使用 JavaScript 将新元素添加到 DOM (appendChild)
【发布时间】：2011-07-15 04:22:47
【问题描述】：

有时我需要向现有 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);

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

【问题讨论】：

标签： javascript dom

【解决方案1】：

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

【讨论】：

谢谢！我会在下一个项目中检查这个。

【解决方案2】：

请注意，innerHTML 既非标准又臭名昭著的 buggy。

【讨论】：

哇，我不知道innerHTML 有问题！感谢您的提醒。

【解决方案3】：

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

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

【讨论】：

感谢有关高度和宽度的提示。这很有道理。

【解决方案4】：

如果您不添加很多东西，那么您一直在做的方式与 innerHTML 相比是理想的。但是，如果您经常这样做，则可能只创建一个通用函数/对象，该函数/对象将相关信息作为参数并执行繁琐的工作。浏览器

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

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

【讨论】：