那些遇到过的问题

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

Sag*_*r V 4 javascript jquery dom

QA风格

我最近阅读了一篇文章,它说JavaScript已经实现,append并且prepend方法受到jQuery的启发.

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

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

所以我的问题是

JavaScript的追加前置和jQuery的附加前置之间有什么区别(易用性和性能)

不是Append Vs AppendChild JQuery的骗局

Sag*_*r V 9

TL; 博士

通常,JavaScript比jQuery更快.

jQuery的append和prepend可以在一个jQuery对象上执行,该对象由多个HTML元素组成,但是JavaScript的append和prepend只能执行单个HTML元素.

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

答案很长

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

根据MDN,

浏览器支持是Chrome 54 +,Firefox 49+和Opera 39+.

在Edge上测试它无法正常工作.

追加

JavaScript的

来自MDN

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

句法

ParentNode.append(val1,val2,val3);
Run Code Online (Sandbox Code Playgroud)

的val可以是一个HTML元素或字符串(将被转换为textNode)

jQuery的

来自api.jQuery.com

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

句法

jQueryCollection.append(val1,valn);
Run Code Online (Sandbox Code Playgroud)

的val可以是HTML字符串或元素或文本或阵列或另一个jQuery对象

jQuery和JavaScript之间的区别

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

绩效衡量

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

JavaScript - 附加HTML元素

document.querySelectorAll('div').forEach(x=> x.append(document.createElement('span')));
Run Code Online (Sandbox Code Playgroud)

6.0ms

jQuery的

$('div').append(document.createElement('span'));
Run Code Online (Sandbox Code Playgroud)

70.0ms

JavaScript附加纯文本

document.querySelectorAll('div').forEach(x=> x.append('Hello'));
Run Code Online (Sandbox Code Playgroud)

4.0ms

jQuery附加纯文本

$('div').append('Hello');
Run Code Online (Sandbox Code Playgroud)

14.0ms

像往常一样,JavaScript比jQuery更快,但jQuery可以采用更多类型的参数并且易于编写.

2.前置

JavaScript的

来自MDN

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

句法

ParentNode.prepend(val1,val2,val3);
Run Code Online (Sandbox Code Playgroud)

的val可以是一个HTML元素或字符串(将被转换为textNode)或阵列

jQuery的

来自api.jQuery.com

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

句法

jQueryCollection.prepend(val1,valn);
Run Code Online (Sandbox Code Playgroud)

的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')));
Run Code Online (Sandbox Code Playgroud)

6.0ms

jQuery的

$('div').prepend(document.createElement('span'));
Run Code Online (Sandbox Code Playgroud)

63.0ms

JavaScript前缀为纯文本

document.querySelectorAll('div').forEach(x=> x.prepend('Hello'));
Run Code Online (Sandbox Code Playgroud)

4.005ms

jQuery前缀为纯文本

$('div').prepend('Hello');
Run Code Online (Sandbox Code Playgroud)

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'));
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

1943 次

最近记录：

8 年，5 月 前
jQuery append()vs appendChild() 80
更多相关链接
相关归档
安全地将JSON字符串转换为对象 1298
阻止下载HTML5视频(右键单击保存)？ 156
使用ng-repeat列表中的分页 130
将附加数据设置为highcharts系列 108
jQuery - 检查DOM元素是否已存在 71
检查cookie是否已启用 65
JS提示 - 不要在循环中创建函数 58
使用jQuery解析远程内容的最佳实践是什么？ 35
如何动态地将新列添加到HTML表 21
脚本没有创建<a>元素 0
难疑归档
REST中的PUT与POST 5227
For-each在JavaScript中的数组？ 4448
不区分大小写'包含(字符串)' 2785
在Python中手动引发(抛出)异常 2079
自制安装特定版本的公式？ 2072
打印Java数组最简单的方法是什么？ 1852
喜欢构成而不是继承？ 1538
如何知道对象在Python中是否具有属性 1491
如何设置HTML <select>元素的默认值？ 1343
如何让ASP.NET Web API使用Chrome返回JSON而不是XML？ 1220