Comparison between native JS and jQuery DOM, jsjquerydom

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.