使用 JavaScript (appendChild) 向 DOM 添加新元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2962137/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding new elements into DOM using JavaScript (appendChild)
提问by KatieK
I sometimes need to add elements (such as a new link and image) to an existing HTML page, but I only have access to a small portion of the page far from where I need to insert elements. I want to use DOM based JavaScript techniques, and I must avoid using document.write().
我有时需要向现有 HTML 页面添加元素（例如新链接和图像），但我只能访问远离需要插入元素的页面的一小部分。我想使用基于 DOM 的 JavaScript 技术，我必须避免使用 document.write()。
Thus far, I've been using something like this:
到目前为止，我一直在使用这样的东西：
// 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);
Is there a more efficient way that I could use to accomplish the same thing? It all seems necessary, but I'd like to know if there's a better way I could be doing this.
有没有更有效的方法可以用来完成同样的事情？这一切似乎都是必要的，但我想知道是否有更好的方法可以做到这一点。
回答by Matias
There is a more efficient way, and seems to be using documentFragments if possible. Check it out: http://ejohn.org/blog/dom-documentfragments/. Also this way should be less error prone and more maintainable than starting to mix up huge strings literals and setting them as innerHTML of some other DOM objects.
有一种更有效的方法，如果可能的话，似乎正在使用 documentFragments。检查一下：http: //ejohn.org/blog/dom-documentfragments/。此外，与开始混合大量字符串文字并将它们设置为一些其他 DOM 对象的 innerHTML 相比，这种方式应该更不容易出错且更易于维护。
回答by dplass
回答by Tim Down
Nothing wrong with that. Using innerHTMLwould be marginally faster and probably fewer characters but not noticeable for something of this scale, and my personal preference is for the more standard, uniformly supported and safer DOM methods and properties.
没有错。使用innerHTML会稍微快一点，可能会更少的字符，但对于这种规模的东西并不明显，我个人更喜欢更标准、统一支持和更安全的 DOM 方法和属性。
One minor point: the heightand widthproperties of <img>elements should be numbers rather than strings.
一个小问题：元素的height和width属性<img>应该是数字而不是字符串。
回答by edl
If you're not adding many things, the way you've been doing it is ideal vs innerHTML. If you're doing it frequently though, you might just create a generic function/object that takes the pertinent information as parameters and does the dirty work. IE
如果你没有添加很多东西，你一直在做的方式是理想的与 innerHTML 相比。如果你经常这样做，你可能只是创建一个通用的函数/对象，它将相关信息作为参数并做一些肮脏的工作。IE
function addImage(src,width,height,alt,appendElem,href) {...}
I do this often in my own projects using prototyping to save time.
我经常在我自己的项目中使用原型制作来节省时间。
