文档的增删改
1. 添加/替换元素
* append(content)
向当前匹配的所有元素内部的最后插入指定内容
* prepend(content)
向当前匹配的所有元素内部的最前面插入指定内容
* before(content)
将指定内容插入到当前所有匹配元素的前面
* after(content)
将指定内容插入到当前所有匹配元素的后面替换节点
* replaceWith(content)
用指定内容替换所有匹配的标签删除节点
2. 删除元素
* empty()
删除所有匹配元素的子元素
* remove()
删除所有匹配的元素
需求:
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
html如下:
<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>
实现如下:
//1. 向id为ul1的ul下添加一个span(最后) var $ul1 = $("#ul1"); $ul1.append("<span>这是append的追加</span>"); $("<span>这是appendTo的追加</span>").appendTo("#ul1"); // 2. 向id为ul1的ul下添加一个span(最前) $ul1.prepend("<span>这是append的前面</span>") $("<span>这是appendTo的追加</span>").prependTo("#ul1"); // 3. 在id为ul1的ul下的li(title为hello)的前面添加span $("#ul1>li[title='hello']").before('<span>这是before的追加</span>') $("#ul1>li").filter("[title='hello']").before('<span>这是before的追加</span>'); // 4. 在id为ul1的ul下的li(title为hello)的后面添加span $("#ul1>li").filter("[title='hello']").after('<span>这是after的追加</span>'); // 5. 将在id为ul2的ul下的li(title为hello)全部替换为p $("#ul1>li").filter("[title='hello']").replaceWith("<p></p>"); // 6. 移除id为ul2的ul下的所有li $("#ul2>li").remove()
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步