“ innerHTML + =…” vs“ appendChild（txtNode）”

Question

问题是，使用innerHTML比较隐含性，并将文本节点附加到现有节点。幕后发生了什么？

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

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

我希望你们能为我解决这个问题，谢谢！

我发现了两种将span元素添加到DOM的不同方法，但是我不确定哪种方法在最佳实践和性能方面更好。 const letterEl = document.createElement（'span'）...

Answer 1

后者（appendChild）确实不是

Answer 2

我创建了一个小要点，并在innerHTML和appendChild之间进行了性能比较。