jQuery - HTML DOM 操作（三）
2016-08-07 本文已影响14人
AshengTan
jQuery 中提供了一系列的 HTML DOM 操作的方法，比起原生 JavaScript 的 DOM 操作，显得更加地简便。
本文目录：
- 添加元素或内容；
- 删除元素或内容。
添加元素或内容
jQuery 中提供了一系列的方法来添加元素或内容，这里主要介绍以下四种：
- prepend()： 在所选元素的开头插入元素或内容（标签内）；
- append()： 在所选元素的结尾插入元素或内容（标签内）；
- before()： 在所选元素之前插入元素或内容（标签外）；
- after()： 在所选元素之后插入元素或内容（标签外）。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>添加删除元素或内容</title>
<script src="js/jquery-1.8.3.js"></script>
</head>
<body>
<p id="p1">这是一个段落</p>
<button id="btn1">在标签开头插入内容</button>
<button id="btn2">在标签结尾插入内容</button>
<h1 id="h1">这是一个段落</h1>
<button id="btn3">在标签之前插入内容</button>
<button id="btn4">在标签之后插入内容</button>
<script>
$(function () {
$("#btn1").click(function () {
$("#p1").prepend("之前");
});
$("#btn2").click(function () {
$("#p1").append("<b>之后</b>");
});
$("#btn3").click(function () {
$("#h1").before("<b>之前</b>");
});
$("#btn4").click(function () {
$("#h1").after("之后");
});
});
</script>
</body>
</html>
效果演示：
添加元素或内容.gif
删除元素或内容
jQuery 中提供了一系列的方法来删除元素或内容，这里介绍下面两种方法：
- remove()： 删除所选元素及其子元素（包括内容和事件）；
- empty()： 删除所选元素本身及其子元素的内容和事件。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>删除元素或内容</title>
<script src="js/jquery-1.8.3.js"></script>
<style>
#div1 {
width: 400px;
height: 200px;
background-color: coral;
}
p{
color: yellow;
}
</style>
</head>
<body>
<div id="div1">divdividiv
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</div>
<button id="btn1">删除 div 元素</button>
<button id="btn2">清空 div 元素</button>
<script>
$(function () {
$("#btn1").click(function () {
$("#div1").remove();
});
$("#btn2").click(function () {
$("#div1").empty();
});
});
</script>
</body>
</html>
效果演示：
删除元素或内容.gif
