Comparative summary of native JS and jQuery operation DOM

1. Create element nodes

1.1 Native JS Creates Element Nodes

document.createElement("p");

1.2 jQuery Creating Element Nodes

$('<p></p>');`

2. Create and add text nodes

2.1 Native JS Creates Text Nodes

`document.createTextNode("Text Content");

Creating text nodes is usually used in conjunction with creating element nodes, such as:

var textEl = document.createTextNode("Hello World.");
var pEl = document.createElement("p");
pEl.appendChild(textEl);

2.2 jQuery Create and Add Text Nodes:

var $p = $('<p>Hello World.</p>');

3. Copy nodes

3.1 Native JS replication nodes:

var newEl = pEl.cloneNode(true); `

Differences between true and false:

true: Cloning the whole ' < p > Hello World. < /p > 'Node false: Clone only ' < p > < /p > ', do not clone the text Hello World.'

3.2 jQuery Replication Node

$newEl = $('#pEl').clone(true);

Note: Cloning nodes to avoid ` ID duplication

4. Insert a node

4.1 Native JS adds a new child node to the end of the child node list

El.appendChild(newNode);

Native JS inserts a new child node before the existing child node of the node:

El.insertBefore(newNode, targetNode);

4.2 There are more ways to insert nodes in jQuery than in native JS

Add content at the end of the list of matched element child nodes

$('#El').append('<p>Hello World.</p>');

Add the matching element to the end of the target element child node list

$('<p></p>');`

0

Add content at the beginning of the list of matched element child nodes

$('<p></p>');`

1

Add the matching element to the beginning of the target element child node list

$('<p></p>');`

2

Add target content before matching elements

$('#El').before('<p>Hello World.</p>');

Add the matching element before the target element

$('<p></p>');`

4

Add target content after matching elements

$('<p></p>');`

5

Add the matching element after the target element

$('<p></p>');`

6

5. Delete Node

5.1 Native JS Delete Node

$('<p></p>');`

7

5.2 jQuery Delete Node

$('#El').remove();

6. Replace nodes

6.1 Native JS Replacement Node

$('<p></p>');`

9

Note: oldNode must be a real 1 child node of parentEl

6.2 jQuery Replacement Node

$('p').replaceWith('<p>Hello World.</p>');

7. Set/Get Properties

7.1 Native JS Set Properties/Get Properties

imgEl.setAttribute("title", "logo");
imgEl.getAttribute("title");
checkboxEl.checked = true;
checkboxEl.checked;

7.2 jQuery Set Properties/Get Properties:

$("#logo").attr({"title": "logo"});
$("#logo").attr("title");
$("#checkbox").prop({"checked": true});
$("#checkbox").prop("checked");

Summarize

The above is the whole content of this article. I hope the content of this article can bring 1 certain help to everyone's study or work. If you have any questions, you can leave a message for communication.