javascript 在 DOM 中添加/删除多个元素的最快方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7307087/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fastest way to add/remove multiple elements in DOM
提问by Totty.js
Edit: It's not a duplicate of "Fastest DOM insertion" because it includes the event listeners variable too. Anyway I will edit the question.
编辑：它不是“最快的 DOM 插入”的副本，因为它也包含事件侦听器变量。无论如何，我会编辑问题。
I would to know some things if someone already discovered.
如果有人已经发现了，我会知道一些事情。
I would like to know which is the fastest way to add an element in javascript and to be compatible with ie6+, chrome10+, firefox2+.
我想知道在 javascript 中添加元素并与 ie6+、chrome10+、firefox2+ 兼容的最快方法是什么。
Fastest technique to:
最快的技术：
- Add a single element
- Add 100 elements
Any time curve for adding 1 element or 1000 elements
The same as above but for removing an element
Add/Change/Remove an inline style attribute
Add event listeners like mousedown/mouseup/mouseover
Is faster to add/remove some tags over others? ex: is faster to add/remove a
<div>or a<p>? (In the adding mode: I think is faster<p>because it only has 1 letter vs 3 letters, and maybe because div is a container. I don't know, that's why I'm asking :D)- Remove an element, save into js somehow, then re-add it and keep the event listeners working as it were before removing the element
- 添加单个元素
- 添加 100 个元素
添加 1 个元素或 1000 个元素的任何时间曲线
与上面相同，但用于删除元素
添加/更改/删除内联样式属性
添加事件侦听器，如 mousedown/mouseup/mouseover
添加/删除某些标签比其他标签更快吗？例如：添加/删除 a
<div>或 a更快<p>吗？（在添加模式中：我认为更快，<p>因为它只有 1 个字母 vs 3 个字母，也许是因为 div 是一个容器。我不知道，这就是我问的原因：D）- 删除一个元素，以某种方式保存到 js 中，然后重新添加它并在删除元素之前保持事件侦听器的工作状态
This a big question, so if you only know some of the questions you can always share what you know ;)
这是一个大问题，所以如果你只知道其中的一些问题，你可以随时分享你所知道的；)
thanks thanks!!
谢谢，谢谢！！
采纳答案by clarkb86
1 Set the value of innerHTMLon the parent element to a string containing HTML for the new elements.
2 Same as 1.
4 Set the value of innerHTMLon the parent element to an empty string.
7.1 Call Node.removeChild(), save the returned Node object, and then pass the node to Node.appendChild().
1 将innerHTML父元素上的值设置为包含新元素的 HTML 的字符串。
2 同1。
4 将innerHTML父元素上的值设置为空字符串。
7.1 调用Node.removeChild()，保存返回的Node对象，然后将节点传递给Node.appendChild()。
回答by Py.
Google/SO are your friends:
Google/SO 是您的朋友：
For example for question 1/2 , see Fastest DOM insertion
例如对于问题 1/2 ，请参阅最快的 DOM 插入
I think, you can search for a lot of them.
我想，你可以搜索很多。
Another good place to search for performance comparison beside google/SO is to use jsperf: http://jsperf.com/browseand http://jsperf.com/popular. I'm pretty sure there are response to a lot of your question there. And if you have some questions that are unanswered, you can test them as well in the main page http://jsperf.com/.
除了 google/SO 之外，另一个搜索性能比较的好地方是使用 jsperf：http://jsperf.com/browse和http://jsperf.com/popular。我很确定那里有对你的很多问题的回应。如果您有一些未解决的问题，您也可以在主页http://jsperf.com/ 中测试它们。
