javascript - 哪种方法的性能更好/更快 - createElement 还是innerHTML？

Question

这个问题已经有答案了:

Advantages of createElement over innerHTML? (5 个回答)

已关闭 6 年前。

我正在制作带有几个子元素的 div，如下所示:

<div class="item" data-id="28">
    <div class="action-btns">
        <button class="add"></button>
        <button class="rmv"></button>
    </div>
    <div class="info">
        <h3>Title here</h3>
        <span>caption here</span>
    </div>
</div>

我在单击时为这两个按钮提供了功能。我想知道哪种创建这些项目的方法更好 - createElement 或 innerHTML？

就 createElement 而言，我喜欢它，因为我可以在元素内创建按钮时绑定(bind) onclick，然后附加它。我还想知道将此“item”附加到父 div 是否比更新innerHTML +=“something”更快/更好；

就 innerHTML 而言，需要编写的代码行更少，但我也必须在按钮内编写 onclick="myFunction()"，而不是动态添加它。

除了纯 Js，请不要使用 jQuery 或任何其他内容。感谢您抽出时间:)

Answer 1

https://jsperf.com/innerhtml-vs-createelement-test (注意这不是我写的)

使用 createElement 在 Chrome 中的结果大约慢 60% 左右。根据(@Sagar V 和 @Hajji Tarik)的回答，考虑的不仅仅是速度。