Comparison summary of native JS and jQuery operating DOM

Some comparisons and summaries of native JS and jQuery operating DOM. This article summarizes a lot of comparisons. I believe it will be helpful to everyone’s study or work. Friends in need can refer to it. Let’s take a look together.

1. Create element nodes

1.1 Create element nodes with native JS

document.createElement("p");

1.2 jQuery creates element nodes

$(&#39;<p></p>&#39;);`

2. Create and add text nodes

2.1 Native JS Create text nodes

document.createTextNode("Text Content");

Usually creating text nodes is 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 creation and addition Text node:

var $p = $(&#39;<p>Hello World.</p>&#39;);

3. Copy node

3.1 Native JS copy node:

var newEl = pEl.cloneNode(true);

The difference between true and false:

1. ##true: clone the entire 'e388a4556c0f65e1904146cc1a846beeHello World.< ;/p>'Node

2. false: Only clone 'e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3', do not clone the text Hello World.

   
   

3.2 jQuery copy node

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

Note: To avoid duplicate IDs when cloning nodes

4. Insert 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 In jQuery, there are many more ways to insert nodes than native JS

Add content at the end of the matching element's child node list

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

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

$(&#39;<p>Hello World.</p>&#39;).appendTo(&#39;#El&#39;);

Add content at the beginning of the matching element's child node list

$(&#39;#El&#39;).prepend(&#39;<p>Hello World.</p>&#39;);

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

$(&#39;<p>Hello World.</p>&#39;).prependTo(&#39;#El&#39;);

Add the target content before the matching element

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

Add the matching element before the target element

$(&#39;<p>Hello World.</p>&#39;).insertBefore(&#39;#El&#39;);

Add the target content after the matching element

$(&#39;#El&#39;).after(&#39;<p>Hello World.</p>&#39;);

Add the matching element after the target element

$(&#39;<p>Hello World.</p>&#39;).insertAfter(&#39;#El&#39;);

5. Delete the node

5.1 Native JS delete node

El.parentNode.removeChild(El);

5.2 jQuery delete node

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

6. Replace node

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

$(&#39;p&#39;).replaceWith(&#39;<p>Hello World.</p>&#39;);

7. Set properties/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");

Summary

The above is the entire content of this article. I hope the content of this article can bring some help to everyone's study or work. If you have any questions, you can leave a message to communicate.