Javascript Append And Prepend Vs Jquery Append And Prepend
Solution 1:
Tl; Dr
as usuall , JavaScript is faster than jQuery.
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'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).
The long answer
JavaScript implemented append and prepend but the browser support is not upto the expectation.
According to MDN,
The browser support is Chrome 54+, Firefox 49+ and Opera 39+.
Tested on Edge and it is not working.
1. append
JavaScript
From MDN
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.
syntax
ParentNode.append(val1,val2,val3);
The val
can be either an HTML element or a string(which will be converted to textNode)
jQuery
From api.jQuery.com
Insert content, specified by the parameter, to the end of each element in the set of matched elements.
syntax
jQueryCollection.append(val1,valn);
The val
can be html string or element or text or array or another jQuery object
The difference between jQuery and 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
Performance measurement
The test is done to append things to 500 divs.
JavaScript - append with HTML element
document.querySelectorAll('div').forEach(x=> x.append(document.createElement('span')));
6.0ms
jQuery
$('div').append(document.createElement('span'));
70.0ms
JavaScript append with plain text
document.querySelectorAll('div').forEach(x=> x.append('Hello'));
4.0ms
jQuery append with plain text
$('div').append('Hello');
14.0ms
as normal, JavaScript is faster than jQuery but jQuery can take more types of arguments and easy to write.
2. prepend
JavaScript
From MDN
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.
syntax
ParentNode.prepend(val1,val2,val3);
The val
can be either an HTML element or a string(which will be converted to textNode) or array
jQuery
From api.jQuery.com
Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
syntax
jQueryCollection.prepend(val1,valn);
The val
can be html string or element or text or array or another jQuery object
The difference between jQuery and 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
Performance measurement
The test is done to prepend things to 500 divs.
JavaScript - prepend with HTML element
document.querySelectorAll('div').forEach(x=> x.prepend(document.createElement('span')));
6.0ms
jQuery
$('div').prepend(document.createElement('span'));
63.0ms
JavaScript prepend with plain text
document.querySelectorAll('div').forEach(x=> x.prepend('Hello'));
4.005ms
jQuery prepend with plain text
$('div').prepend('Hello');
17.0ms
same here. JavaScript is faster than jQuery but jQuery can take more types of arguments and easy to write.
A snippet with some codes used for the tests.
functionjsAppend(){
document.querySelectorAll('div').forEach(x=> {x.append(document.createElement('span'))});
}
functionjsPrepend(){
document.querySelectorAll('div').forEach(x=> {x.prepend(document.createElement('span'))});
}
functionjqAppend(){
$('div').append($('<span></span'));
}
functionjqPrepend(){
$('div').prepend($('<span></span'));
}
<scriptsrc="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>
Post a Comment for "Javascript Append And Prepend Vs Jquery Append And Prepend"