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

问题描述

我最近阅读了一篇文章,文章说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的附加前置项有什么区别(在易用性和性能上)

推荐答案

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,

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

Tested on Edge and it is not working.

1.追加

JavaScript

1. append

JavaScript

来自 MDN

语法

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

语法

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

JavaScript-附加HTML元素

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

jQuery

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

JavaScript附加纯文本

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

jQuery用纯文本追加

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

通常,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(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

语法

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')));

jQuery

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

JavaScript以纯文本开头

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

jQuery以纯文本开头

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

这里也一样. 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附加和前置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-23 00:10
查看更多