jQuery从入门到熟练(17)

4、文档处理（CUD）

增加append() / appendTo(): 向当前匹配的所有元素内部的最后插入指定内容preppend() / preppendTo(): 向当前匹配的所有元素内部的最前面插入指定内容before(): 将指定内容插入到当前所有匹配元素的前面after(): 将指定内容插入到当前所有匹配元素的后面替换节点删除remove(): 将自己及内部的孩子都删除empty(): 掏空(自己还在)更新replaceWith()：用指定内容替换所有匹配的标签删除节点
<style type="text/css"> * { margin: 0px; } .div1 { position: absolute; width: 200px; height: 200px; top: 20px; left: 10px; background: blue; } .div2 { position: absolute; width: 100px; height: 100px; /*top: 50px;*/ background: red; } .div3 { position: absolute; top: 250px; }</style><ul> <li>AAAAA</li> <li title="hello">BBBBB</li> <li class="box">CCCCC</li> <li title="hello">DDDDDD</li> <li title="two">EEEEE</li> <li>FFFFF</li></ul><br><br><ul> <li>aaa</li> <li title="hello">bbb</li> <li class="box">ccc</li> <li title="hello">ddd</li> <li title="two">eee</li></ul><script src="js/jquery-1.10.1.js" type="text/javascript"></script><script type="text/javascript"> //1. 向id为ul1的ul下添加一个span(最后) var $ul1 = $("#ul1") // $ul1.append("<span>append()添加的span</span>") $("<span>appendTo()添加的span</span>").appendTo($ul1) //2. 向id为ul1的ul下添加一个span(最前) // $ul1.prepend("<span>prepend()添加的span</span>") $("<span>prependTo()添加的span</span>").prependTo($ul1) //3. 在id为ul1的ul下的li(title为hello)的前面添加span $ul1.children("li[title=hello]").before("<span>before()添加的span</span>") //4. 在id为ul1的ul下的li(title为hello)的后面添加span $ul1.children("li[title=hello]").after("<span>after()添加的span</span>") //5. 将在id为ul2的ul下的li(title为hello)全部替换为p $("#ul2>li[title=hello]").replaceWith("<p>replaceAll()替换的p</p>") //6. 移除id为ul2的ul下的所有li // $("#ul2").empty() // <p>也会删除 $("#ul2>li").remove()</script>