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

Question

哪些性能更​​好？

多姆

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

jQuery

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

Answer 1

好吧，除非您的目标是早于Chrome 1.0, Firefox 8.0, IE 4.0, Opera 7.0, or Safari 4.0，否则使用 是安全的insertAdjacentHTML。jQuery可以解决浏览器之间可能发生的任何不一致，但它也需要一个完整的库来完成这一操作。如果您已经在使用 jQuery，请坚持使用 jQuery 方法。如果您不使用 jQuery，并且想知道仅针对这种方法开始使用它是否有益，那么请不要打扰。

就“更好”而言，就像我说的那样，两者都应该在浏览器之间保持一致/可靠，但insertAdjacentHTML它是一种直截了当且不需要额外代码（如 jQuery 使用）的本机 DOM 方法......意思是应该“更快”。

.append()接受多种类型的参数（HTML 字符串、DOM 元素、jQuery 对象，甚至是包含这些东西的数组/对象字面量）……在内部，.append()使用Element.appendChild. insertAdjacentHTML只接受 HTML 字符串。

基于此，它可能会或可能不会影响您的决定。

参考：

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