Comparison between native JS and jQuery DOM, jsjquerydom

Comparison between native JS and jQuery DOM, jsjquerydom

I. Create element nodes

1.1 native JS creates element nodes

document.createElement("p");

1.2 create an element node using jQuery

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

2. Create and add text nodes

2.1 native JS creates text nodes

`document.createTextNode("Text Content");

Generally, you can create text nodes and element nodes in combination. For example:

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

2.2 create and add a text node using jQuery:

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

Iii. Copy nodes

3.1 native JS replication nodes:

var newEl = pEl.cloneNode(true); `

Difference between true and false:

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

3.2 jQuery replication Node

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

Note:Duplicate 'id' should be avoided when cloning a node

4. Insert nodes

4.1 native JS adds a new subnode to the end of the subnode list

El.appendChild(newNode);

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

El.insertBefore(newNode, targetNode);

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

Add content at the end of the child node list of matching elements

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

Add matching elements to the end of the target element subnode list

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

Add content at the beginning of the child node list of the Matching Element

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

Add matching elements to the beginning of the target element subnode list

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

Add target content before Matching Element

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

Add the matching element to the target Element

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

Add target content after Matching Element

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

After adding the matching element to the target Element

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

5. delete a node

5.1 native JS delete node

El.parentNode.removeChild(El);

5.2 jQuery delete a node

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

Vi. Replacing nodes

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

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

VII. Set Properties/get Properties

7.1 native JS sets attributes/obtains attributes

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

7.2 jQuery sets/retrieves attributes:

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

Summary

The above is all about this article. I hope this article will help you in your study or work. If you have any questions, please leave a message.