前言

通過 jQuery，可以很容易地新增和刪除元素。

新增元素

新增元素主要用到四個方法

• append() - 在被選元素的結尾插入內容
• prepend() - 在被選元素的開頭插入內容
• after() - 在被選元素之後插入內容
• before() - 在被選元素之前插入內容

append() 方法在被選元素的結尾插入內容（作為該元素子元素插入）

<div id="demo">
    <p class="text-info">hello world</p>
    <input type="text" name="user" value="hello world">
</div>
<button id="btn">點我</button>
<script>
    $(document).ready(function(){
      $("#btn").click(function(){
          // 新增一個元素
          $("#demo").append("<p>追加一段文字</p>");
      });
});
</script>
 

點按鈕後在div下新增一個元素

prepend()在被選元素的開頭插入內容

   $(document).ready(function(){
      $("#btn").click(function(){
          // 新增一個元素
          $("#demo").prepend("<p>追加一段文字</p>");
      });
    });

實現效果,新增到div下第一個子元素

after()在被選元素之後插入內容

    $(document).ready(function(){
      $("#btn").click(function(){
          // 新增一個元素
          $("#demo").after("<p>追加一段文字</p>");
      });
    });
 

在div後面新增兄弟元素

before() 在被選元素之前插入內容

    $(document).ready(function(){
      $("#btn").click(function(){
          // 新增一個元素
          $("#demo").before("<p>追加一段文字</p>");
      });
    });

replaceWith()替換元素

replaceWith() 方法用指定的 HTML 內容或元素替換被選元素。

content 引數必需。規定替換被選元素的內容。已存在的元素不會被移動，只會被複制，幷包裹被選元素。

基本語法

$(selector).replaceWith(content)

使用示例

<div id="demo">
    <p class="text-info">hello world</p>
    <input type="text" name="user" value="hello world">
</div>
<button id="btn">點我</button>
<script>
    $(document).ready(function(){
      $("#btn").click(function(){
          // 新增一個元素
          $("p.text-info").replaceWith("<p>替換成新文字</p>");
      });
    });
</script>

替換後

replaceWith() 方法也可以傳一個function 函式

$(selector).replaceWith(function())

示例

    $(document).ready(function(){
      $("#btn").click(function(){
          // 新增一個元素
          $("p.text-info").replaceWith(function () {
              return '<p>new hello world</p>'
          });
      });
    });

replaceAll() 與 replaceWith()功能類似，但是目標和源相反

左邊是新內容，右邊selector是被替換的內容

$(content).replaceAll(selector)

示例

    $(document).ready(function(){
      $("#btn").click(function(){
          // 新增一個元素
          $('<p>new hello world</p>').replaceAll('p.text-info')
      });
    });

總結：

• replaceAll()和.replaceWith()功能類似，主要是目標和源的位置區別
• replaceWith()與.replaceAll() 方法會刪除與節點相關聯的所有資料和事件處理程式
• replaceWith()方法，和大部分其他jQuery方法一樣，返回jQuery物件，所以可以和其他方法連結使用
• replaceWith()方法返回的jQuery物件引用的是替換前的節點，而不是通過replaceWith/replaceAll方法替換後的節點

刪除元素remove()和empty()

刪除元素和內容，可使用以下兩個 jQuery 方法：

• empty() - 從被選元素中刪除子元素
• remove() - 刪除被選元素（及其子元素）

empty() 從被選元素中刪除子元素

示例

<div id="demo">
    <p class="text-info">hello world</p>
    <input type="text" name="user" value="hello world">
</div>
<button id="btn">點我</button>
<script>
    $(document).ready(function(){
      $("#btn").click(function(){
          // 新增一個元素
          $('#demo').empty();
      });
    });
</script>

div還在

remove() 刪除元素以及子元素

<div id="demo">
    <p class="text-info">hello world</p>
    <input type="text" name="user" value="hello world">
</div>
<button id="btn">點我</button>
<script>
    $(document).ready(function(){
      $("#btn").click(function(){
          // 新增一個元素
          $('#demo').remove();
      });
    });
</script>

remove() 會刪除div以及它的子元素