$(element).append() 和 element.insertAdjacentHTML 有什么区别？

Question

哪个性能更好？

Dom。

    element.insertAdjacentHTML('afterend', '<div id="two">two</div>'); 

Jquery

    $(element).append('<div id="two">two</div>')

- Raymond

---

如果你正在使用jQuery，请使用第二个。如果没有，请使用第一个。 - Blender

你的意思是 'beforeend' 吗？否则你就是在拿苹果和猩猩比较。 - Crescent Fresh

你根据什么标准来判断一个函数比另一个“更好”？棒球棒比高尔夫球杆更好吗？ - user229044

根据 jsperf 的测试结果，jQuery.append 使用的 appendChild 可能比 insertAdjacentHTML 更快。 - Ray Nicholus

Answer 1

除非你的目标浏览器版本早于 Chrome 1.0、Firefox 8.0、IE 4.0、Opera 7.0 或者 Safari 4.0，否则使用 insertAdjacentHTML 是安全的。jQuery 可以解决不同浏览器之间可能出现的不一致性问题，但是这也需要整个库来完成这一个操作。如果您已经在使用 jQuery，请坚持使用 jQuery 方法。如果您还没有使用 jQuery，并且想知道是否为了这个方法而开始使用它是否有益，则不要费心。

就“更好”的方面而言，像我说的那样，两种方法在各个浏览器中都应该相当一致/可靠，但是 insertAdjacentHTML 是一个本地 DOM 方法，直截了当，并且不需要额外的代码（如 jQuery 使用）……这意味着它应该更“快”。

.append() 接受多种类型的参数（HTML 字符串、DOM 元素、jQuery 对象，甚至包含这些内容的数组/对象文字），并且在内部使用 Element.appendChild。 insertAdjacentHTML 仅接受 HTML 字符串。

基于这一点，它可能会或可能不会影响您的决策。

参考资料：

• element.insertAdjacentHTML() - https://developer.mozilla.org/en-US/docs/DOM/element.insertAdjacentHTML
• $.append() - http://api.jquery.com/append/

- Ian