Comparison summary of native JS and jQuery operations

1. Create element nodes

1.1 Native JS create element nodes

("p");

1.2 jQuery creates element nodes

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

2. Create and add text nodes

2.1 Native JS creates text nodes

`("Text Content");

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

var textEl = ("Hello World.");
var pEl = ("p");
(textEl);

2.2 jQuery creates and adds text nodes:

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

3. Replication node

3.1 Native JS replication node:

var newEl = (true); `

The difference between true and false:

• true: cloning the entire '<p>Hello World.</p>' node
• false: only cloning '<p></p>' , not cloning text Hello World.'
  

3.2 jQuery replication node

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

Notice:Cloning nodes should avoid duplication of `ID

4. Insert nodes

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

(newNode);

Native JS inserts a new child node before the node's existing child node:

(newNode, targetNode);

4.2 In jQuery, there are many more methods to insert nodes than native JS

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

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

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

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

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

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

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

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

Add target content before matching elements

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

Before adding the matching element to the target element

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

Add target content after matching elements

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

After adding the matching element to the target element

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

5. Delete nodes

5.1 Native JS Delete Node

(El);

5.2 jQuery Delete Node

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

6. Replace nodes

6.1 Native JS replacement node

(newNode, oldNode);

Notice:oldNode must be a child node of parentEl.

6.2 jQuery replacement node

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

7. Set properties/get properties

7.1 Native JS setting properties/get properties

("title", "logo");
("title");
 = true;
;

7.2 jQuery setting properties/get properties:

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

Summarize

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