文档操作:
内部插入:
a.append(c): 将c插入到a的内部(标签体)后面
bprepend(c): 将c插入到a内部的前面
a.appendTo(c):将a插入到c的内部前面
a.prependTo(c):将a插入到c的内部后面
<html> <head> <title>01_内部插入节点.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //0.获取两个元素 var $city = $("#city"); var $fk = $("#fk"); //1.在city的后面内部追加 反恐 //$city.append($fk); //2.在city的前面内部插入 反恐 $city.prepend($fk); }); </script> </head> <body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="tj" name="tianjin">天津</li> <li id="cq" name="chongqing">重庆</li> </ul> <ul id="love"> <li id="fk" name="fankong">反恐</li> <li id="xj" name="xingji">星际</li> </ul> <div id="foo1">Hello1</div> </body> <script type="text/javascript"> </script> </html>
外部插入:
a.after(c):将c放到a的后面
a.before(c):将c放到a的前面
a.insertAfter(c):将a放到c的后面
a.insertBefore(c):将a放到c的前面
<html> <head> <title>02_外部插入节点.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var $p2 = $("#p2"); var $city = $("#city"); //1.在 p2 的后面插入 city $p2.after($city); //2.在 p2 的前面插入 city $p2.before($city); }); </script> </head> <body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="tj" name="tianjin">天津</li> <li id="cq" name="chongqing">重庆</li> </ul> <p id="p3">I would like to say: p3</p> <p id="p2">I would like to say: p2</p> <p id="p1">I would like to say: p1</p> </body> </html>
删除:
empty() 清空元素
remove() 移除元素
<html> <head> <title>03_删除节点.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var $u1 = $("ul"); //1.清空ul //$u1.empty(); //2.移除天津 remove $("#tj").remove(); }); </script> </head> <body> <ul id="city"> <li id="bj" name="beijing">北京<p>海淀区</p></li> <li id="tj" name="tianjin">天津<p>河西区</p></li> <li id="cq" name="chongqing">重庆</li> </ul> <p class="hello">Hello</p> how are <p>you?</p> </body> </html>