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>

运行结果：



点击按钮后：