Question

这个问题可能是愚蠢的，也可能是基本的。

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

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

通过编辑其中的HTML。

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

使用document.createElement()。

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

问题

最好的方法是什么？一个是单行，另一个是大约五行。
表现方面是什么？
什么是正确的方法或最佳做法？
整个代码之间有什么区别吗？

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

更新

对于亲密的选民，不将成为该问题的副本。我刚才提到的一件事是，使用createElement()保留附加到元素的事件处理程序。即使这是一个好点，任何类型的基本网页也都有jQuery，它提供了委托和这样的东西，即使在HTML中更改后，我也可以将事件附加到元素上。

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

Answer 1

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

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

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

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

回答您的具体问题：

没有“最好的”方式。选择最适合您环境的方法。
您需要测试特定情况的表现。在某些情况下，通过使用{{1}}设置一个大字符串而不是单独创建插入所有对象，可以更快地显示大量HTML。
没有“正确的方法”或“最佳做法。请参阅答案＃1。
如果对两种方法进行编码以产生相同的最终结果，则最终结果不需要有任何区别。

Answer 2

我实际上喜欢两者的组合：createElement用于外部元素，因此您不会删除任何事件处理程序，并且innerHTML表示该元素的内容，以方便和提高性能。例如：

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

当然，当您添加的内容更复杂时，此技术更有用;然后你可以正常使用innerHTML（除了外部元素），但你不会删除任何事件监听器。

Answer 3

1。什么是最好的方法？一个是单行，另一个是大约五行。

这取决于背景。您可能希望谨慎使用innerHTML作为经验法则。

2。性能方面是什么？

DOM操作明显优于innerHTML，但浏览器似乎不断提高innerHTML性能。

3。什么是正确的方法或最佳做法？

见＃1。

4。整个代码之间有什么区别吗？

是。 innerHTML示例将替换现有元素的内容，而DOM示例将新元素放在旧元素旁边。你可能想写mydiv.appendChild(strong)，但这仍然不同。现有元素的子节点被附加到而不是替换。

Answer 4

你最擅长什么意思？在一个DOM操作中，一切都很好，并显示相同的性能。但是当你需要多个DOM插入时，情况会有所不同。

背景

每次插入DOM节点时，浏览器都会呈现页面的新图像。因此，如果在DOM节点中插入多个子节点，浏览器会多次渲染它。那个操作是你看到的最慢的。

解决方案

所以，我们需要立刻追加大多数孩子。使用空的dom节点。内置的是createDocumentFragment();

var holder = createDocumentFragment();
// append everything in the holder
// append holder to the main dom tree

真正的答案

如果您所描述的情况是，我宁愿选择最短的解决方案。因为在一个dom操作中没有性能损失

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

4 个答案: