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

Question

哪个性能更好？

多姆

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

查询

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

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 对象，甚至包含这些东西的数组/对象文字）……并且在内部，.append()使用Element.appendChild.insertAdjacentHTML只接受一个 HTML 字符串。

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

参考：

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