javascript – $(element).append()和element.insertAdjacentHTML之间有什么区别

哪个有更好的表现？

大教堂

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

jQuery的

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

解决方法:

好吧,除非你的目标是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/