Comparison summary of native JS and jQuery operating DOM-JS Tutorial-php.cn

Comparison summary of native JS and jQuery operating DOM

迷茫

Release： 2017-01-24 15:59:40

Original

1587 people have browsed it

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

Copy after login

1.2 jQuery creates element nodes

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

Copy after login

2. Create and add text nodes

2.1 Native JS Create text nodes

document.createTextNode("Text Content");

Copy after login

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

Copy after login

2.2 jQuery creation and addition Text node:

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

Copy after login

3. Copy node

3.1 Native JS copy node:

var newEl = pEl.cloneNode(true);

Copy after login

The difference between true and false:

##true: clone the entire '
Hello World.< ;/p>'Node
false: Only clone '
', do not clone the text Hello World.

3.2 jQuery copy node

$newEl = $(&#39;#pEl&#39;).clone(true);

Copy after login

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

Copy after login

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

El.insertBefore(newNode, targetNode);

Copy after login

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

Copy after login

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

Copy after login

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

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

Copy after login

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

Copy after login

Add the target content before the matching element

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

Copy after login

Add the matching element before the target element

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

Copy after login

Add the target content after the matching element

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

Copy after login

Add the matching element after the target element

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

Copy after login

5. Delete the node

5.1 Native JS delete node

El.parentNode.removeChild(El);

Copy after login

5.2 jQuery delete node

$(&#39;#El&#39;).remove();

Copy after login

6. Replace node

6.1 Native JS replacement node

El.repalceChild(newNode, oldNode);

Copy after login

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

Copy after login

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;

Copy after login

7.2 jQuery set properties/get properties:

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

Copy after login

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.