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>

运行结果：

点击按钮后：