Comparison between native JS and jQuery DOM, jsjquerydom
I. Create element nodes
1.1 native JS creates element nodes
document.createElement("p");
1.2 create an element node using jQuery
$('<p></p>');`
2. Create and add text nodes
2.1 native JS creates text nodes
`document.createTextNode("Text Content");
Generally, you can create text nodes and element nodes in combination. For example:
var textEl = document.createTextNode("Hello World.");var pEl = document.createElement("p");pEl.appendChild(textEl);
2.2 create and add a text node using jQuery:
var $p = $('<p>Hello World.</p>');
Iii. Copy nodes
3.1 native JS replication nodes:
var newEl = pEl.cloneNode(true); `
Difference between true and false:
- True: Clone the entire '<p> Hello World. </p>' node.
- False: Clone '<p> </p>' only, do not clone the text Hello World .'
3.2 jQuery replication Node
$newEl = $('#pEl').clone(true);
Note:Duplicate 'id' should be avoided when cloning a node
4. Insert nodes
4.1 native JS adds a new subnode to the end of the subnode list
El.appendChild(newNode);
Native JS inserts a new subnode before the existing subnode of the node:
El.insertBefore(newNode, targetNode);
4.2 In jQuery, there are more methods to insert nodes than native JS.
Add content at the end of the child node list of matching elements
$('#El').append('<p>Hello World.</p>');
Add matching elements to the end of the target element subnode list
$('<p>Hello World.</p>').appendTo('#El');
Add content at the beginning of the child node list of the Matching Element
$('#El').prepend('<p>Hello World.</p>');
Add matching elements to the beginning of the target element subnode list
$('<p>Hello World.</p>').prependTo('#El');
Add target content before Matching Element
$('#El').before('<p>Hello World.</p>');
Add the matching element to the target Element
$('<p>Hello World.</p>').insertBefore('#El');
Add target content after Matching Element
$('#El').after('<p>Hello World.</p>');
After adding the matching element to the target Element
$('<p>Hello World.</p>').insertAfter('#El');
5. delete a node
5.1 native JS delete node
El.parentNode.removeChild(El);
5.2 jQuery delete a node
$('#El').remove();
Vi. Replacing nodes
6.1 native JS replacement Node
El.repalceChild(newNode, oldNode);
Note:OldNode must be a real child node of parentEl.
6.2 jQuery replacement Node
$('p').replaceWith('<p>Hello World.</p>');
VII. Set Properties/get Properties
7.1 native JS sets attributes/obtains attributes
imgEl.setAttribute("title", "logo");imgEl.getAttribute("title");checkboxEl.checked = true;checkboxEl.checked;
7.2 jQuery sets/retrieves attributes:
$("#logo").attr({"title": "logo"});$("#logo").attr("title");$("#checkbox").prop({"checked": true});$("#checkbox").prop("checked");
Summary
The above is all about this article. I hope this article will help you in your study or work. If you have any questions, please leave a message.