jQuery之文档
添加节点
append(content)/appendTo()：向当前匹配的所有元素内部的最后插入指定内容。
prepend(content)/preppendTo()：向当前匹配的所有元素内部的最前面插入指定内容。
before(content)：将指定内容插入到当前所有匹配元素的前面。
after(content)：将指定内容插入到当前所有匹配元素的后面。
替换节点
replaceWith(content)：用指定内容替换所有匹配的标签。
删除节点
empty()：删除所有匹配元素的子元素。
remove()：删除所有匹配的元素。
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文档_增删改</title> <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> </head> <body> <ul id="ul1"> <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 id="ul2"> <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 type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> /* * 需求： * 1.向id为ul1的ul下添加一个span(最后) * 2.向id为ul1的ul下添加一个span(最前) * 3.在id为ul1的ul下的li(title为hello)的前面添加span * 4.在id为ul1的ul下的li(title为hello)的后面添加span * 5.将在id为ul2的ul下的li(title为hello)全部替换为p * 6.移除id为ul2的ul下的所有li */ $(function (){ //1.向id为ul1的ul下添加一个span(最后) $('#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>li[title=hello]').before('<span>before()添加的span</span>'); //4.在id为ul1的ul下的li(title为hello)的后面添加span $('#ul1>li[title=hello]').after('<span>after()添加的span</span>'); //5.将在id为ul2的ul下的li(title为hello)全部替换为p $('#ul1>li[title=hello]').replaceWith('<p>replaceWith()替换的p</p>'); //6.移除id为ul2的ul下的所有li $('#ul2').empty(); }); </script> </body> </html>
