Javascript &引用；innerHTML+；=&引用；vs"；追加子项（txtNode）"；_Javascript_Dom

Javascript &引用；innerHTML+；=&引用；vs"；追加子项（txtNode）"；

javascript dom

Javascript &引用；innerHTML+；=&引用；vs"；追加子项（txtNode）"；,javascript,dom,Javascript,Dom,问题是，使用innerHTML比较concatation和将文本节点附加到现有节点。幕后发生了什么到目前为止，我对此的想法是：我猜这两个都会导致 “回流” 据我所知，后者（附加一个文本节点）也会导致DOM的完全重建（正确吗？他们都这样做了吗？）前者似乎还有其他一些令人讨厌的副作用，比如导致以前保存的对我正在修改innerHTML的节点的子节点的引用不再指向“当前DOM”/“子节点的正确版本”。相反，在附加子项时，引用似乎保持不变。为什么会这样我希望你们能帮我澄清这件事，谢谢后者（a

问题是，使用innerHTML比较concatation和将文本节点附加到现有节点。幕后发生了什么

到目前为止，我对此的想法是：

我猜这两个都会导致 “回流”
据我所知，后者（附加一个文本节点）也会导致DOM的完全重建（正确吗？他们都这样做了吗？）
前者似乎还有其他一些令人讨厌的副作用，比如导致以前保存的对我正在修改innerHTML的节点的子节点的引用不再指向“当前DOM”/“子节点的正确版本”。相反，在附加子项时，引用似乎保持不变。为什么会这样

我希望你们能帮我澄清这件事，谢谢

后者（

appendChild

）不会导致DOM的完全重建，甚至不会导致目标中所有元素/节点的重建

前者（设置

innerHTML

）确实会导致完全重建目标元素的内容，如果要追加，则不需要这样做

通过

innerHTML+=content

进行追加，使浏览器在元素中的所有节点中运行，生成一个HTML字符串，以提供给JavaScript层。然后，您的代码向其追加文本并设置

innerHTML

，使浏览器删除目标中的所有旧节点，重新解析所有HTML，并构建新节点。因此，从这个意义上讲，它可能不是有效的。（然而，解析HTML是浏览器所做的事情，而且它们真的非常快。）

设置

innerHTML

确实会使您可能持有的目标元素中对元素的任何引用无效——因为这些元素不再存在，所以在设置

innerHTML

时，您删除了它们，然后放入新的元素（看起来非常类似）

简而言之，如果要追加，我会使用

appendChild

（或

insertAdjacentHTML

，请参见下文）。如果您要替换，在一些非常有效的情况下，使用

innerHTML

比自己通过DOM API创建树更好（其中速度是最主要的）

最后，值得一提的是，这是一个可以使用HTML字符串将节点和元素插入到元素中或元素旁边的函数。您可以将它附加到元素：

theElement.insertAdjacentHTML（“beforeend”，“HTML在这里”）第一个参数是将HTML放在何处；您的选择是“beforebeagin”
（在元素外部，就在元素前面）、“afterbegin”
（在元素内部，在元素的开头）、“beforebeand”
（在元素内部，在元素的末尾）和“afterend”
（在元素外部，就在元素的后面）。请注意，“afterbegin”
和“beforeend”
插入元素本身，而“beforebegin”
和“afterend”
插入元素的父元素。受所有主要桌面浏览器的支持，我不知道移动支持有多好（尽管我确信iOS Safari和Android 2.x及以上版本至少有），但它很小。
后者（appendChild
）不会导致完全重建DOM，甚至不会重建目标中的所有元素/节点
前者（设置innerHTML
）确实会导致完全重建目标元素的内容，如果要追加，则不需要这样做
通过innerHTML+=content
进行追加，使浏览器在元素中的所有节点中运行，生成一个HTML字符串，以提供给JavaScript层。然后，您的代码向其追加文本并设置innerHTML
，使浏览器删除目标中的所有旧节点，重新解析所有HTML，并构建新节点。因此，从这个意义上讲，它可能不是有效的。（然而，解析HTML是浏览器所做的事情，而且它们真的非常快。）
设置innerHTML
确实会使您可能持有的目标元素中对元素的任何引用无效——因为这些元素不再存在，所以在设置innerHTML
时，您删除了它们，然后放入新的元素（看起来非常类似）
简而言之，如果要追加，我会使用appendChild
（或insertAdjacentHTML
，请参见下文）。如果您要替换，在一些非常有效的情况下，使用innerHTML
比自己通过DOM API创建树更好（其中速度是最主要的）
最后，值得一提的是，这是一个可以使用HTML字符串将节点和元素插入到元素中或元素旁边的函数。您可以将它附加到元素：theElement.insertAdjacentHTML（“beforeend”，“HTML在这里”）第一个参数是将HTML放在何处；您的选择是“beforebeagin”
（在元素外部，就在元素前面）、“afterbegin”
（在元素内部，在元素的开头）、“beforebeand”
（在元素内部，在元素的末尾）和“afterend”
（在元素外部，就在元素的后面）。请注意，“afterbegin”
和“beforeend”
插入元素本身，而“beforebegin”
和“afterend”
插入元素的父元素。受所有主要桌面浏览器的支持，我不知道移动支持有多好（尽管我确信iOS Safari和Android 2.x及以上版本至少有），但它很小。
我创建了一个小要点，其中比较了innerHTML和appendChild的性能
最后一个以很大的优势获胜
我创建了一个小要点，比较了innerHTML和appendChild之间的性能
最后一个以很大的优势获胜
@TK：浏览器支持如何？一种技术比另一种技术更适用于较旧的浏览器和/或移动浏览器吗？@skaffman：在当今时代，我希望这两种技术都能在短短的时间内实现