jQuery来了--添加元素，删除元素

添加元素

添加新的HTML内容：

• append()：在被选元素的结尾插入内容
• prepend()：在被选元素的开头插入内容
• after()：在被选元素之后插入内容
• before()：在被选元素之前插入内容

append()方法

作用：在被选元素的结尾插入内容

例.

<script>
   $(document).ready(function(){
      $("#btn1").click(function(){
          $("p").append("<b>加一个文本</b>");
      });
      $("#btn2").click(function(){
          $("ol").append("<li>加一个列表项</li>");
      });
   });
</script>

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>

运行结果：

prepend()方法

作用：在被选元素的开头插入内容

例.

<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("p").prepend("<b>在开头追加文本</b>。 ");
    });
    $("#btn2").click(function(){
        $("ol").prepend("<li>在开头添加列表项</li>");
    });
});
</script>

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>

运行结果：

after() 和 before() 方法

after()方法作用：在被选元素之后插入内容

before()方法作用：在被选元素之前插入内容

例.

<script>
   $(document).ready(function(){
      $("#btn1").click(function(){
         $("img").before("<b>之前</b>");   //粗体
      });
      $("#btn2").click(function(){
         $("img").after("<i>之后</i>");    //斜体
      });
   });
</script>

<img src="xxx.png"><br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>

运行结果：

通过 append() 和 prepend() 方法添加若干新元素

append()和prepend()方法能够通过参数接收无限数量的新元素。这些新元素可以通过text/HTML，jQuery或者DOM创建

例.
把新元素追加到文本尾部：

<script>
   function appendText(){
      var txt1="<p>文本</p>";      //使用HTML标签创建文本
      var txt2=$("<p></p>").text("文本");  //使用jQuery text()创建文本
      /* var txt2=$("<p></p>").html("<p>文本</p>");*///使用jQuery html()创建文本
      var txt3=document.createElement("wenben");
      txt3.innerHTML="文本";                   //使用DOM创建文本
      $("body").append(txt1,txt2,txt3);       //追加新元素
   }
</script>

<p>这是一个段落。</p>
<button onclick="appendText()">追加文本</button>

运行结果：

通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。这些新元素可以通过text/HTML，jQuery或者DOM创建

例.
把新元素插入到文本中：

<script>
   function afterText(){
      var txt1="<b> This </b>";      //使用HTML标签创建文本
      var txt2=$("<i></i").text("is ");  //使用jQuery text()创建文本
      /* var txt2=$("<i></i>").html("<i>is </i>");*///使用jQuery html()创建文本
      var txt3=document.createElement("wenben");
      txt3.innerHTML="Nico";                   //使用DOM创建文本
      $("img").after(txt1,txt2,txt3);       //追加新元素
   }
</script>

<img src="xxx.png">
<button onclick="afterText()">之后插入</button>

运行结果：

删除元素

删除元素和内容：

• remove()：删除被选元素（及其子元素）
• empty()：从被选元素中删除子元素

remove()方法

作用：用于删除被选元素及其子元素

例.

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").remove();
  });
});
</script>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>
</div>
<br>
<button>移除div元素</button>

运行结果：

点击按钮后：

empty()方法

作用：用于删除被选元素的子元素

例.

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").empty();
  });
});
</script>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>
</div>
<br>
<button>清空div元素</button>

运行结果：

点击按钮后：

过滤被删除的元素

remove()方法可接受一个参数，允许对被删元素进行过滤，该参数可以是任何jQuery选择器的语法

例.
删除 class="italic" 的所有 <p> 元素：

<script>
   $(document).ready(function(){
      $("button").click(function(){
         $("p").remove(".italic");
      });
   });
</script>

<p>这是一个段落</p>
<p class="italic"><i><b>这是另外一个段落</b></i></p>
<p class="italic"><i><b>这是另外一个段落</b></i></p>
<button>移除所有  class="italic" 的 p 元素。</button>

运行结果：

点击按钮后：