添加DOM元素,正确的方法是什么？

Question

这个问题可能是愚蠢的,也可能是基本的.

有人可以解释哪个是添加DOM元素的最佳方法.我们有两种添加DOM元素的方法.

场景:需要<strong>Hi</strong>在现有内部添加<div id="theEl"></div>.

1. 通过编辑其中的HTML.

   document.getElementById("theEl").innerHTML = '<strong>Hi</strong>';
   

2. 通过使用document.createElement().

   var hi = document.createTextNode("Hi"),
   strong = document.createElement("strong");
   strong.appendChild(hi);
   mydiv = document.getElementById("theEl");
   document.body.insertBefore(strong, mydiv);
   

问题

1. 什么是最好的方法？一个是单行,另一个是大约五行.
2. 性能方面是什么？
3. 什么是正确的方法或最佳做法？
4. 整个代码之间有什么区别吗？

如果这个问题没有意义,请告诉我,我很乐意关闭这个,甚至删除它.谢谢.

---

更新

对于亲密的选民来说,这不会是这个问题的重复.我刚才提到的一件事是,使用createElement()保留附加到元素的事件处理程序.即使这是一个好点,任何类型的基本网页,其中也有jQuery,它提供委托和这样的东西,允许我甚至在HTML更改后将事件附加到元素.

---

伙计们,请密切投票,保持冷静.一种研究.

Answer 1

没有"最佳"或"最佳实践".它们是添加具有不同特征的内容的两种不同方法.您选择哪一个取决于您的具体情况.

为了创建大量的元素,一次设置一个HTML块通常比创建和插入大量单个元素更快.虽然如果你真的关心这方面的性能,你需要在像jsperf这样的工具中测试你的特定情况.

要创建具有大量精细控制的元素,从变量设置类,从变量设置内容等等,通过createElement()直接访问每个元素的属性而不必构造字符串通常会更容易.

如果你真的不知道这两种方法之间的区别,并且没有看到任何明显的理由在特定情况下使用一种方法,那么使用更简单且代码更少的方法.我就是做这个的.

在回答您的具体问题时:

1. 没有"最好的"方式.选择最适合您环境的方法.
2. 您需要测试特定情况的表现.在某些情况下,通过设置一个大字符串.innerHTML而不是单独创建插入所有对象,可以更快地显示大量HTML .
3. 没有"正确的方法"或"最佳实践.请参阅答案#1.
4. 如果对这两种方法进行编码以创建相同的最终结果,则最终结果不需要存在差异.

Answer 2

我实际上喜欢两者的组合:createElement对于外部元素,因此您不会删除任何事件处理程序,也不会删除innerHTML该元素的内容,以方便和提高性能.例如:

var strong = document.createElement('strong');
strong.innerHTML = 'Hi';
document.getElementById('theEl').appendChild(strong);

当然,当你添加的东西的内容更复杂时,这种技术更有用; 然后你可以innerHTML正常使用(除了外部元素)但你没有删除任何事件监听器.