Native JS vs. jquery operation Dom

First, create element node 1.1 native JSCreating ELEMENT nodes

Document.createelement ("P");

1.2 jQueryCreating ELEMENT nodes

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

II. Create and add a text node 2.1 native JS Create a text node

document.createTextNode ("Text Content");

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

var textel = document.createTextNode ("Hello World.") ); var pEl = document.createelement ("P");p El.appendchild (Textel);

2.2 jQueryTo create and add a text node:

var $p = $ (' <p>hello world.</p> ');

Third, replication node 3.1 native JSReplication nodes:

var newel = Pel.clonenode (true);  `

3.2 jQueryReplication nodes

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

Iv. Insert Node 4.1 Native JS Add a new child node to the end of the list of child nodes

El.appendchild (NewNode);

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

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

$ (' #El '). Append (' <p>hello world.</p> ');

Add a matching element 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 match element

$ (' #El '). Prepend (' <p>hello world.</p> ');

Add a matching element 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 a 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 the matching element is added to the target element

$ (' <p>hello world.</p> '). InsertAfter (' #El ');

V. Delete node 5.1 native JS Delete node

El.parentNode.removeChild (EL);

5.2 JQuery Delete Node

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

VI. Replacement node 6.1 native JS replacement node

El.repalcechild (NewNode, OldNode);

6.2 JQuery Replacement Node

$ (' P '). ReplaceWith (' <p>hello world.</p> ');

Vii. setting Properties/Get Properties 7.1 native JS set properties/Get Properties

Imgel.setattribute ("title", "logo"); Imgel.getattribute ("title"true; checkboxel.checked;

7.2 jquery Set Properties/Get Properties:

$ ("#logo"). attr ({"title": "Logo"}), $ ("#logo"). attr ("title");$ (true}); $ ("# CheckBox "). Prop (" checked ");

Native JS vs. jquery operation Dom