DOM operation 2 in jQuery Development

DOM operation 2 in jQuery Development

Next article

3. Insert a node
The method for inserting a node is as follows:

4. delete a node
(1) remove () method
The function is to delete all matching elements from the DOM. The sample code is as follows:

Var $ li = $ ("ul li: eq (1)"). remove (); // after obtaining the second <li> node, delete it from the webpage.

Note: When a node is deleted with remove (), all child nodes contained in the node will be deleted at the same time. The return value of this method is a reference pointing to the deleted node. Therefore, you can continue to use these elements later.

(2) detach () method
The detach () and remove () methods also remove matching elements from the DOM, but note that this method does not delete matching elements from the jQuery object, therefore, these matching elements can be used in the future. Unlike remove (), all bound events and additional data are retained.
The sample code is as follows:

Var $ li = $ ("ul li: eq (1)"). detach (); // obtain the second <li> node and delete it from the webpage.

(3) empty () method
Strictly speaking, the empty () method does not delete nodes, but clears nodes. It can clear all child nodes in the element.
The sample code is as follows:

Var $ li = $ ("ul li: eq (1)"). empty (); // after obtaining the second <li> node, clear the content in the element.

5. Copy nodes

<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 

6. node replacement
If you want to replace a node, jQuery provides the corresponding methods, namely replaceWith () and replaceAll ();
The replaceWith () method is used to replace all matched elements with the specified HTML live DOM element.
The sample code is as follows:

<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 

The running result is as follows:

The sample code for the replaceAll () method is as follows:

<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 

The running result is as follows:

7. Package nodes
(1) wrap () method
JQuery code example:

$ ("Strong"). wrap ("<br> </br>"); // wrap the <strong> element with the <br> label.

The running result is as follows:

<br><srong>something</strong></br>

(2) wrapAll () method
This method will wrap all matching elements with one element. Unlike the wrap () method, the wrap () method encapsulates all elements.
The jQuery sample code is as follows:

$("strong").wrapAll("<br></br>");

The running result is as follows:

<Br> <strong> your favorite fruit </strong> </br>

(3) wrapInner () method
This method wraps the word content (text node) of each Matching Element with its structured tag. The jQuery sample code is as follows:

$("strong").wrapInner("<br></br>");

The running result is as follows:

<Strong> <br> favorite fruit </br> </strong>