铊;医生

Question

^QA风格

我最近阅读了一篇文章，它说JavaScript已经实现了来自jQuery的 append 和 prepend 方法。

这对我来说是一个新知识，因为据我所知，要附加一个元素，我必须使用element.appendChild并添加一个元素，我必须使用element.insertBefore(newElement,element.children[0])。

但jQuery的追加和前置有很多功能，比如接受多个参数。

所以我的问题是

JavaScript的追加前置和jQuery附加前置之间的区别是什么（易用性和性能）

不是Append Vs AppendChild JQuery
的欺骗

Answer 1

铊;医生

通常，JavaScript比jQuery更快。

jQuery的追加和前置可以在一个jQuery对象上执行，该对象由多个HTML元素组成，但JavaScript的追加和前置只能执行单个HTML元素。

jQuery的append和prepend可以将HTML元素，htmlString，jQuery对象，纯文本或HTML元素数组作为输入，但JavaScript的append和prepend只能使用HTML元素和字符串（将转换为textNode）。

答案很长

JavaScript实现了追加和前置，但浏览器支持不符合预期。

根据MDN，

浏览器支持是Chrome 54 +，Firefox 49+和Opera 39 +。

在Edge上测试但它无效。

1。附加

的JavaScript

来自MDN

ParentNode.append方法在ParentNode的最后一个子节点之后插入一组Node对象或DOMString对象。 DOMString对象作为等效的Text节点插入。

语法

ParentNode.append(val1,val2,val3);

val可以是HTML元素或字符串（将转换为textNode）

的jQuery

来自api.jQuery.com

将参数指定的内容插入匹配元素集中每个元素的末尾。

语法

jQueryCollection.append(val1,valn);

val可以是html字符串或元素或文本或数组或其他jQuery对象

jQuery和JavaScript之间的区别

jQuery append可以应用于jQuery对象，该对象是HTML元素的集合，但JavaScript追加可以应用于单个元素

绩效衡量

完成测试以将事物附加到500个div。

JavaScript - 附加HTML元素

document.querySelectorAll('div').forEach(x=> x.append(document.createElement('span')));

6.0ms

的jQuery

$('div').append(document.createElement('span'));

70.0ms

JavaScript附加纯文本

document.querySelectorAll('div').forEach(x=> x.append('Hello'));

4.0ms

jQuery附加纯文本

$('div').append('Hello');

14.0ms

正常情况下，JavaScript比jQuery更快，但jQuery可以使用更多类型的参数并且易于编写。

2。前置

的JavaScript

来自MDN

ParentNode.prepend方法在ParentNode的第一个子节点之前插入一组Node对象或DOMString对象。 DOMString对象作为等效的Text节点插入。

语法

ParentNode.prepend(val1,val2,val3);

val可以是HTML元素或字符串（将转换为textNode）或数组

的jQuery

来自api.jQuery.com

将参数指定的内容插入匹配元素集中每个元素的开头。

语法

jQueryCollection.prepend(val1,valn);

val可以是html字符串或元素或文本或数组或其他jQuery对象

jQuery和JavaScript之间的区别

jQuery prepend可以应用于jQuery对象，该对象是HTML元素的集合，但JavaScript prepend可以应用于单个元素

绩效衡量

完成测试以将事物前置为500个div。

JavaScript - 前缀HTML元素

document.querySelectorAll('div').forEach(x=> x.prepend(document.createElement('span')));

6.0ms

的jQuery

$('div').prepend(document.createElement('span'));

63.0ms

JavaScript前置纯文本

document.querySelectorAll('div').forEach(x=> x.prepend('Hello'));

4.005ms

jQuery prepend with plain text

$('div').prepend('Hello');

17.0ms

在这里。 JavaScript比jQuery更快，但jQuery可以使用更多类型的参数并且易于编写。

包含用于测试的一些代码的代码段。

function jsAppend(){
  document.querySelectorAll('div').forEach(x=> {x.append(document.createElement('span'))});
}

function jsPrepend(){
  document.querySelectorAll('div').forEach(x=> {x.prepend(document.createElement('span'))});
}

function jqAppend(){
  $('div').append($('<span></span'));
}

function jqPrepend(){
  $('div').prepend($('<span></span'));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

JavaScript附加和prepend与jQuery追加和前置

1 个答案:

铊;医生

答案很长

1。附加

jQuery和JavaScript之间的区别

绩效衡量

JavaScript - 附加HTML元素

的jQuery

JavaScript附加纯文本

jQuery附加纯文本

2。前置

jQuery和JavaScript之间的区别

绩效衡量

JavaScript - 前缀HTML元素

的jQuery

JavaScript前置纯文本

jQuery prepend with plain text

包含用于测试的一些代码的代码段。