The difference between native JS and jquery operation Dom

Go from Network

First, create ELEMENT nodes

1.1 Native JS Create element node

?

1	document.createElement("p");

1.2 jquery Creating ELEMENT nodes

?

1	$(‘<p></p>‘);`

II. Create and add a text node

2.1 Native JS Create text node

?

1	`document.createTextNode("Text Content");

It is common to create text nodes and create element nodes, such as:

?

123	vartextEl = document.createTextNode("Hello World.");varpEl = document.createElement("p");pEl.appendChild(textEl);

2.2 jquery Create and add a text node:

?

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

Third, replication node

3.1 Native JS replication nodes:

?

1	varnewEl = pEl.cloneNode(true); `

The difference between true and false:

• True: Clone the entire ' <p>hello world.</p> ' node
• False: Clone only ' <p></p> ', do not clone text Hello world. '

3.2 JQuery Replication Node

?

1	$newEl = $(‘#pEl‘).clone(true);

Note: clone nodes to avoid ' ID duplicates '

Iv. inserting nodes

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

?

1	El.appendChild(newNode);

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

?

1	El.insertBefore(newNode, targetNode);

4.2 In jquery, the method of inserting nodes is much more than native JS

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

?

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

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

?

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

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

?

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

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

?

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

Add target content before matching elements

?

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

Before adding a matching element to the target element

?

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

Add target content after matching elements

?

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

After the matching element is added to the target element

?

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

V. Deleting nodes

5.1 Native JS Delete node

?

1	El.parentNode.removeChild(El);

5.2 JQuery Delete Node

?

1	$(‘#El‘).remove();

Vi. Replacement nodes

6.1 Native JS Replacement node

?

1	El.repalceChild(newNode, oldNode);

Note:OldNode must be a child node of Parentel real existence

6.2 JQuery Replacement Node

?

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

Vii. setting Properties/Getting Properties

7.1 Native JS set properties/Get Properties

?

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

7.2 jquery Set Properties/Get Properties:

?

1234	$("#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 that the content of this article on everyone's study or work can bring certain help, if there is doubt you can message exchange.

Original link: http://blog.poetries.top/2017/01/14/js-and-jquery-dom-compare/

The difference between native JS and jquery operation Dom