哪个更快 - 在飞行中使用HTML或使用javascript创建元素？

Question

object.innerHTML = "<div class='panel'>foo |</div>"

或

panel = document.createElement ("div");
panel.setAttribute ("class", "panel");
panel.innerHTML = "foo |";
object.appendChild (panel);

假设我正在创建大量的div（大约一百个左右），每个都有事件动作，类和id名称，这会更有效吗？或者没关系？

Answer 1

关于实用性

如果您拥有正确的XSS安全性，我发现innerHTML的易用性远远超过了潜在使用DOM的速度优势。使用innerHTML，您只需编写HTML。

浏览器的实际速度

取决于浏览器，innerHTML在IE中通常更快。在Chrome中，DOM操作通常更快，但一如既往地取决于用例。

Chrome，Firefox，Safari的速度非常快，几乎无关紧要。 考虑到IE通常是速度较慢的浏览器之一，我建议使用innerHTML来帮助IE ... innerHTML在IE中几乎总是更快。

源： http://jsperf.com/dom-vs-innerhtml/10

如果要添加大量元素，innerHTML通常是可行的方法。