JavaScript附加和前置与jQuery附加和前置 [英] JavaScript append and prepend vs jQuery append and prepend

查看：51
本文介绍了JavaScript附加和前置与jQuery附加和前置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

质量检查样式

QA Style

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

I recently read an article and it says that JavaScript has implemented append and prepend methods inspired from jQuery.

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

It was a new knowledge for me because as far as I know to append an element, I had to use element.appendChild and to prepend an element, I had to use element.insertBefore(newElement,element.children[0]).

但是jQuery的append和prepend具有很多功能，例如接受多个参数.

But jQuery's append and prepend have lots of features like accepting multiple arguments.

所以我的问题是

JavaScript的附加前置项和jQuery的附加前置项有什么区别(在易用性和性能上)

不是 Append-vs-appendchild-jquery的伪装

推荐答案

Tl;博士

通常，JavaScript比jQuery快.

Tl; Dr

as usuall , JavaScript is faster than jQuery.

可以在由多个HTML元素组成的jQuery对象上执行jQuery的附加和前缀，但是仅可以在单个HTML元素上执行JavaScript的附加和前缀.

jQuery's append and prepend can be executed on a jQuery object which consist of multiple HTML elements but JavaScript's append and prepend can be executed only single HTML element.

jQuery的附加和前置可以接受HTML元素，htmlString，jQuery对象，纯文本或HTML元素数组作为输入，但是JavaScript的附加和前置只能接受HTML元素和字符串(将转换为textNode).

jQuery's append and prepend can take HTML element, htmlString, jQuery object, plain text or array of HTML elements as input but JavaScript's append and prepend can take only HTML element and string(which will be converted to textNode).

JavaScript实现了追加和前置，但是浏览器支持达不到预期.

JavaScript implemented append and prepend but the browser support is not upto the expectation.

根据MDN，

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

The browser support is Chrome 54+, Firefox 49+ and Opera 39+.

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

Tested on Edge and it is not working.

1.追加

JavaScript

1. append

JavaScript

来自 MDN

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

The ParentNode.append method inserts a set of Node objects or DOMString objects after the last child of the ParentNode. DOMString objects are inserted as equivalent Text nodes.

语法

ParentNode.append(val1,val2,val3);

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

The val can be either an HTML element or a string(which will be converted to textNode)

jQuery

来自 api.jQuery.com

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

Insert content, specified by the parameter, to the end of each element in the set of matched elements.

语法

jQueryCollection.append(val1,valn);

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

The val can be html string or element or text or array or another jQuery object

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

jQuery append can be applied to a jQuery object that is a collection of HTML elements but JavaScript append can be applied to a single element

已完成测试以将内容附加到500 divs.

The test is done to append things to 500 divs.

JavaScript-附加HTML元素

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

6.0ms

6.0ms

jQuery 

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

70.0ms

70.0ms

JavaScript附加纯文本

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

4.0ms

4.0ms

jQuery用纯文本追加

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

14.0ms

14.0ms

通常，JavaScript比jQuery快，但是jQuery可以接受更多类型的参数并且易于编写.

as normal, JavaScript is faster than jQuery but jQuery can take more types of arguments and easy to write.

2.前置

JavaScript

2. prepend

JavaScript

来自 MDN

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

The ParentNode.prepend method inserts a set of Node objects or DOMString objects before the first child of the ParentNode. DOMString objects are inserted as equivalent Text nodes.

语法

ParentNode.prepend(val1,val2,val3);

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

The val can be either an HTML element or a string(which will be converted to textNode) or array

jQuery

来自 api.jQuery.com

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

Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.

语法

jQueryCollection.prepend(val1,valn);

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

The val can be html string or element or text or array or another jQuery object

jQuery前缀可以应用于html对象集合的jQuery对象，而JavaScript前缀可以应用于单个元素

jQuery prepend can be applied to a jQuery object that is a collection of HTML elements but JavaScript prepend can be applied to a single element

已完成测试，可以将内容添加到500 divs.

The test is done to prepend things to 500 divs.

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

6.0ms

6.0ms

jQuery 

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

63.0ms

63.0ms

JavaScript以纯文本开头

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

4.005ms

4.005ms

jQuery以纯文本开头

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

17.0ms

17.0ms

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

same here. JavaScript is faster than jQuery but jQuery can take more types of arguments and easy to write.

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附加和前置与jQuery附加和前置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆