javascript appendChild、insertAdjacentHTML 和innerHTML 的区别是什么
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16126960/
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
What is the difference between appendChild, insertAdjacentHTML, and innerHTML
提问by Jongz Puangput
I want to know what the difference is between appendChild, insertAdjacentHTML, and innerHTML.
我想知道的区别是什么之间appendChild，insertAdjacentHTML和innerHTML。
I think their functionality are similar but I want to understand clearly in term of usage and not the execution speed.
我认为它们的功能相似，但我想在使用方面而不是执行速度方面清楚地了解。
- For example, I can use
innerHTMLto insert a new tag or text into another tag in HTML but it replaces the current content in that tag instead of appends. If I would like to do it that way (not replace) I need to use
insertAdjacentHTMLand I can manage where I want to insert a new element (beforebegin,afterbegin,beforeend,afterend)And the last if I want to create (not insertion in current tag) a new tag and insert it into HTML I need to use
appendChild.
- 例如，我可以使用
innerHTML在 HTML 中将新标签或文本插入到另一个标签中，但它会替换该标签中的当前内容而不是追加内容。 如果我想这样做（而不是替换），我需要使用
insertAdjacentHTML并且我可以管理要插入新元素的位置（beforebegin,afterbegin,beforeend,afterend）最后，如果我想创建（不是在当前标签中插入）一个新标签并将其插入到 HTML 中，我需要使用
appendChild.
Am I understanding it correctly? Or are there any difference between those three?
我理解正确吗？或者这三者有什么区别吗？
回答by 0x499602D2
From MDN:
innerHTML sets or gets the HTML syntax describing the element's descendants.
when writing to
innerHTML, it will overwrite the content of the source element. That means the HTML has to be loaded and re-parsed. This is not very efficient especially when using inside loops.From MDN:
Adds a node to the end of the list of children of a specified parent node. If the node already exists it is removed from current parent node, then added to new parent node.
This method is supported by all browsers and is a much cleaner way of inserting nodes, text, data, etc. into the DOM.
From MDN:
parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. [ ... ]
This method is also supported by all browsers.
来自 MDN：
innerHTML 设置或获取描述元素后代的 HTML 语法。
写入时
innerHTML，它将覆盖源元素的内容。这意味着必须加载和重新解析 HTML。这不是很有效，尤其是在使用内部循环时。来自 MDN：
将节点添加到指定父节点的子节点列表的末尾。如果该节点已存在，则将其从当前父节点中删除，然后添加到新的父节点中。
所有浏览器都支持此方法，并且是一种将节点、文本、数据等插入 DOM 的更简洁的方式。
来自 MDN：
将指定文本解析为 HTML 或 XML，并将结果节点插入到 DOM 树的指定位置。[...]
所有浏览器也支持此方法。
....
....
回答by Guffa
The appendChildmethods adds an element to the DOM.
这些appendChild方法将一个元素添加到 DOM。
The innerHTMLproperty and insertAdjacentHTMLmethod takes a string instead of an element, so they have to parse the string and create elements from it, before they can be put into the DOM.
的innerHTML属性和insertAdjacentHTML方法需要一个字符串代替的元件的，所以他们必须分析该字符串并从它创建元素，才可以被放入DOM。
The innerHTMLproperty can be used both for getting and setting the HTML code for the content of an element.
该innerHTML属性可用于获取和设置元素内容的 HTML 代码。
回答by Arnaud Leyder
@Guffa did explain the main difference ie innerHTML and insertAdjacentHTML need to parse the string before adding to DOM.
@Guffa 确实解释了主要区别，即innerHTML 和insertAdjacentHTML 在添加到DOM 之前需要解析字符串。
In addition see this jsPerfthat will tell you that generally appendChild is faster for the job it provides.
此外，请参阅此jsPerf，它会告诉您通常 appendChild 对于它提供的工作更快。
回答by Ozerich
回答by egig
One that I know innerHTMLcan grab 'inner html', appendChildand insertAdjacentHTMLcan't;
一个我知道innerHTML可以抓住“内部HTML”，appendChild而insertAdjacentHTML不能;
example:
例子：
<div id="example"><p>this is paragraph</p><div>
js:
js：
var foo = document.getElementById('example').innerHTML;
end then now
那么现在结束
foo = '<p>this is paragraph</p>';
