The DOM operation of jquery Development II

Last Update:2015-06-16 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The next article

3, inserting nodes
The methods for inserting nodes are as follows:

4, deleting nodes
(1) Remove () method
The effect is to remove all matching elements from the DOM. The sample code is as follows:

$li =$("ul li:eq(1)").remove();       //获取第二个<li>节点后，将它从网页中删除。

Note: When a node is removed with remove (), all descendant nodes that the node contains are deleted at the same time. The return value of this method is a reference to the deleted node, so you can continue to use the elements later.

(2) Detach () method
The detach () and the Remove () method also remove the matching elements from the DOM, but be aware that this method does not remove the matching elements from the jquery object, so that the matching elements can be used in the future. Unlike remove (), all the bound events, the attached data will be preserved.
The sample code is as follows:

$li =$("ul li:eq(1)").detach();  //获取第二个<li>节点后，将它从网页中删除。

(3) Empty () method
Strictly speaking, the empty () method is not to delete a node, but to empty the node, which empties all the descendant nodes in the element.
The sample code is as follows:

var$li = $("ul li:eq(1)").empty();  //获取第二个<li>节点后，清空元素里的内容。

5, copy Node

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" ><html><head><meta http-equiv="Content-type" Content="text/html; charset=gb18030 "><title>CSS Ajax</title><script type ="text/javascript" src ="Jquery.js " ></script><script type ="Text/javascript">$ (document). Ready (function(){ $ ("ul Li:eq (2)"). Click (function　　 (){ $ (this). Clone (). AppendTo ("ul"); //Copy the node that is currently clicked and append it to the <ul> element.     });});</script></head><body><p Title ="Choose your favorite Fruit">Choose your favorite fruit</P><ul><Li title ="Apple">Apple</li><Li title ="Orange">Orange</li><Li title ="Pineapple">Pineapple</li></ul></body></html>

6, node substitution
If you are replacing a node, jquery provides the appropriate method, namely ReplaceWith () and ReplaceAll ();
The function of the ReplaceWith () method is to replace all matching 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" ><html><head><meta http-equiv="Content-type" Content="text/html; charset=gb18030 "><title>JQuery Test</title><script type ="text/javascript" src ="Jquery.js " ></script><script type ="Text/javascript">$ (document). Ready (function(){ $ ("P"). ReplaceWith ("<strong> Which fruit do you dislike the most? </strong> ")});</script></head><body><p Title ="Choose your favorite Fruit">Choose your favorite fruit</P><ul><Li title ="Apple">Apple</li><Li title ="Orange">Orange</li><Li title ="Pineapple">Pineapple</li></ul></body></html>