【问题标题】：JavaScript append and prepend vs jQuery append and prependJavaScript 追加和前置 vs jQuery 追加和前置
【发布时间】：2018-01-06 14:34:27
【问题描述】：

^{QA 风格}

我最近读了一篇文章，它说 JavaScript 实现了受 jQuery 启发的 append 和 prepend 方法。

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

但是 jQuery 的 append 和 prepend 有很多特性，比如接受多个参数。

所以我的问题是

JavaScript 的 append prepend 和 jQuery 的 append prepend 有什么区别（易用性和性能）

不是Append Vs AppendChild JQuery的骗子

【问题讨论】：

QA 风格。已经回答了。我相信如果针对特定范围的浏览器，这种方法可以减少 JavaScript 中的大量工作。即 Chrome、FF 和 Opera

标签： javascript jquery dom

【解决方案1】：

Tl;博士

像往常一样，JavaScript 比 jQuery 快。

jQuery 的 append 和 prepend 可以在由多个 HTML 元素组成的 jQuery 对象上执行，但 JavaScript 的 append 和 prepend 只能执行单个 HTML 元素。

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

长答案

JavaScript 实现了 append 和 prepend，但浏览器支持达不到预期。

根据 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 可以应用于作为 HTML 元素集合的 jQuery 对象，但 JavaScript append 可以应用于单个元素

性能测量

完成测试以将内容附加到 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.0 毫秒

通常，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 可以应用于作为 HTML 元素集合的 jQuery 对象，但 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.0 毫秒

JavaScript 前置纯文本

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

4.005 毫秒

jQuery 前置纯文本

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

17.0 毫秒

这里也一样。 JavaScript 比 jQuery 快，但 jQuery 可以接受更多类型的参数并且易于编写。

带有一些用于测试的代码的 sn-p。

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>

【讨论】：