18

这个问题可能很愚蠢，也可能很基础。

有人可以解释添加 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 更改之后，我也可以将事件附加到元素上。

伙计们，请在近距离投票时保持冷静。一种研究。

4

4 回答 4

9

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

对于创建大量元素，一次设置一个 HTML 块通常比创建和插入大量单个元素更快。尽管如果您真的关心这方面的性能，您将需要在 jsperf 之类的工具中测试您的特定情况。

对于创建具有大量精细控制的元素、从变量设置类、从变量设置内容等...，通过createElement()您可以直接访问每个元素的属性而无需构造字符串通常更容易做到这一点.

如果您真的不知道这两种方法之间的区别，并且看不到在特定情况下使用其中一种方法的明显理由，那么请使用更简单且代码更少的方法。我就是做这个的。

在回答您的具体问题时：

  1. 没有“最好”的方式。选择最适合您的情况的方法。
  2. 您将需要测试您的特定环境的性能。在某些情况下，通过设置一个大字符串.innerHTML而不是单独创建一个插入所有对象，大量的 HTML 已被证明更快。
  3. 没有“正确方法”或“最佳实践”。请参阅答案#1。
  4. 如果对这两种方法进行编码以创建相同的最终结果，则这两种方法创建的最终结果没有区别。
于 2013-04-12T04:07:56.557 回答
5

我实际上喜欢两者的结合：createElement对于外部元素，您不会删除任何事件处理程序，innerHTML对于该元素的内容，为了方便和性能。例如：

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

当然，当您添加的内容更复杂时，这种技术会更有用；那么您可以innerHTML正常使用（外部元素除外），但您不会删除任何事件侦听器。

于 2013-04-12T04:06:58.670 回答
1

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

这取决于上下文。根据经验，您可能希望innerHTML谨慎使用。

2. 什么是性能方面？

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

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

见#1。

4. 代码整体有区别吗？

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

于 2013-04-12T04:11:33.177 回答
1

你说的最好是什么意思？仅在一次 DOM 操作中，一切都很好，并且表现出相同的性能。但是当你需要多个 DOM 插入时，事情就不同了。

背景

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

解决方案

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

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

真正的答案

如果是您所描述的情况，我更喜欢最短的解决方案。因为在一次 dom 操作中没有性能损失

于 2013-04-12T04:20:40.413 回答