jQuery文档处理

一、概述

1，添加、删除元素

• append(content)
  向当前匹配的所有元素内部的最后插入指定内容
• prepend(content)
  向当前匹配的所有元素内部的最前面插入指定内容
• before(content)
  将指定内容插入到当前所有匹配元素的前面
• after(content)
  将指定内容插入到当前所有匹配元素的后面替换节点
• replaceWith(content)
  用指定内容替换所有匹配的标签删除节点
• empty()
  删除所有匹配元素的子元素
• remove()
  删除所有匹配的元素

二、使用示例

操作区：

<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>')或者
 $('<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()