文件的增刪改

你若精彩，蝴蝶自來發表於2018-07-31

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()

 

相關文章