在前端开发中，我们通常会需要动态添加或更新DOM元素。而jQuery和原生JavaScript提供了三种不同的方法：.append()、.html()和.innerHTML来实现这个功能。但是，这三种方法之间到底有什么区别呢？它们的性能又如何？
方法介绍
.append()
.append()方法可以将一个元素插入到指定元素的最后面。例如：
$('myList').append('<li>New list item</li>');这段代码会在id为myList的元素的最后面，添加一个新的列表项。
.html()
.html()方法则可以替换掉指定元素的所有子元素。例如：
$('myDiv').html('<p>New content</p>');这段代码会用一个包含文本“New content”的p标签，替换掉id为myDiv的元素中的所有内容。
.innerHTML
和.html()类似，.innerHTML属性可以设置或获取指定元素的HTML内容。例如：
document.getElementById('myDiv').innerHTML = '<p>New content</p>';这段代码会用一个包含文本“New content”的p标签，替换掉id为myDiv的元素中的所有内容。
性能测试
为了比较这三种方法的性能，我创建了一个简单的测试页面，其中包含了三个按钮，分别将1000个li元素添加到一个空的ul元素中。分别使用了.append()、.html()和.innerHTML三种方法来实现这一功能。
-- -------------------- ---- -------
--- -----------------
------- -------------------- ------------------
------- ------------------ ----------------
------- ----------------------- -------------------
--------
-- -----------------
-------- ---------- -
--- ---- - ---
--- ---- - - -- - - ----- ---- -
---- -- --------- - - - - --------
-
------ -----
-
--------------------------------- -
--------------------------------
---
------------------------------- -
------------------------------
---
------------------------------------ -
------------------------------------------- - -----------
---
---------然后我用Chrome DevTools的Performance工具进行了性能测试。每种方法被执行了10次，并取平均值作为结果。下面是测试结果：
| 方法 | 平均耗时 |
|---|---|
.append() |
0.262ms |
.html() |
1.032ms |
.innerHTML |
0.154ms |
结论
通过以上测试结果，我们可以得出以下结论：
.append()的性能最佳，执行时间最短。.innerHTML的性能稍优于.html()，但两者之间的差异不大。- 总体上来说，这三种方法的性能都非常高效，对于大多数应用场景来说，它们的差异不会对用户体验产生明显的影响。
最佳实践
虽然这三种方法都非常高效，但是在实际开发中我们还是需要考虑一些最佳实践：
- 对于单个元素的更新，
.append()和.html()可以达到相同的效果。但是如果你需要添加多个相同类型的元素，使用.append()会更加方便。 - 如果你需要在JavaScript中生成HTML代码，则最好使用字符串拼接而不是使用
.html()或.innerHTML属性。因为这样可以避免潜在的安全问题（例如XSS攻击）。 - 在执行大量DOM操作时，最好使用文档碎
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29854