jQuery之文档
Posted hfl1996
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于jQuery之文档的主要内容，如果未能解决你的问题，请参考以下文章
[ jquery 文档处理 insertBefore(content) before(content|fn) ] 此方法用于把所有匹配的元素插入到另一个指定的元素元素集合的前面,实现外部插入(代码片段