0%

3.4.6 操作DOM节点的相关方法

发表于 更新于 分类于 ， ，

3.4.6 操作DOM节点的相关方法

在DOM操作中最常见的操作就是对节点的操作,包括创建节点、复制节点、插入节点和删除节点等,而jQuery也提供了大量相关方法来简化对DOM节点的操作。

1.在指定节点内插入新节点

插入新节点的方法

以下方法都用于在指定节点内插入新节点。

在当前jQuery内部插入其他元素

方法 描述
append(content) 在jQuery对象包含的所有DOM节点内的尾部插入content内容。其中content既可以是HTML字符串,也可以是DOM元素,还可以是jQuery对象。
append(function(index,html)) 使用function(index,html)函数迭代处理jQuery所包含的每个节点,在每个节点的尾部依次插入function(index,html)函数的返回值。function(index,html)函数中的index、html参数表示当前正在被迭代处理的DOM节点的索引和DOM节点内容。
prepend(content) 在jQuery对象包含的所有DOM节点内的顶部插入content内容,其中content既可以是HTML字符串,也可以是DOM元素,还可以是jQuery对象。
prepend(function(index,html)) 使用function(index,html)函数迭代处理jQuery所包含的每个节点,在每个节点的顶部依次插入function(index,html)函数的返回值。function(index,html)函数中的index、html参数表示当前正在被迭代处理的DOM节点的索引和DOM节点内容。
#### 把当前jQuery对象插入其他元素内部 ####
方法 描述
appendTo(selector) 将当前jQuery对象包含的DOM元素添加到与selector匹配的所有DOM内部的尾端。
prependTo(selector) 将当前jQuery对象包含的DOM元素添加到与selector匹配的所有DOM的内部的顶端。
#### append方法和appendTo方法的区别 ####
- append()方法是在当前jQuery对象内部插入其他元素;
- appendTo()方法是将当前jQuery 对象插入到其他元素内部。A.append(B)的作用与B.appendTo(A)的作用类似。

程序示例

下面的程序示范了这些方法的功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>

<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 添加HTML节点 </title>
</head>

<body>
	<div id="test1">&nbsp;test1&nbsp;</div>
	<div id="test2" style="border:1px solid black;">id为test2的元素</div>
	<script type="text/javascript" src="../jquery-3.1.1.js">
	</script>
	<script type="text/javascript">
		// 直接将一段HTML字符串添加到id为test1的元素的内部的尾端
		$("#test1").append("<b>疯狂XML讲义</b>");
		// 创建一个<span.../>元素
		var span = document.createElement("span");
		span.innerHTML = "疯狂Java讲义"
		// 将一个DOM元素添加到id为test1的元素的内部的顶端
		$("#test1").prepend(span);

		// 将id为test1的元素添加到id为test2的元素内部的尾端
		$("#test1").appendTo("#test2");
	</script>
</body>

</html>

如果使用append(function(index,html))、prepend(function(index,html))方法则可以为不同元素添加不同的内容,例如下面的页面代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>

<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 添加HTML节点 </title>
</head>

<body>
	<div>1.</div>
	<div>2.</div>
	<div>3.</div>
	<script type="text/javascript" src="../jquery-3.1.1.js">
	</script>
	<script type="text/javascript">
		// 定义一个数组
		var books = [
			{ name: "疯狂Java讲义", price: 109 },
			{ name: "轻量级Java EE企业应用实战", price: 89 },
			{ name: "疯狂Android讲义", price: 89 }]
		// 使用函数为不同div元素动态添加不同的内容
		$("body>div").append(function (i) {
			// i代表jQuery对象中正在迭代处理的元素的索引，因此为0、1、2...
			return "<b>书名是《" + books[i].name
				+ "》,价格是:" + books[i].price;
		});
	</script>
</body>

</html>

2.在指定节点外添加节点

以下方法用于在目标节点的前后添加新节点。

把新节点插入到当前jQuery对象的前后

方法 描述
after(content) 在该jQuery对象包含的所有DOM节点之后添加content内容。其中content既可以是HTML字符串,也可以是DOM对象,还可以是jQuery对象。
after(function(index)) 使用function(index)函数迭代处理jQuery所包含的每个节点,在每个节点的后面依次添加function(index)函数的返回值。function(index)函数中的index参数表示当前正在被迭代处理的DOM节点的索引。
before(content) 在该jQuery对象包含的所有DOM节点之前添加content内容。其中content既可以是HTML字符串,也可以是DOM对象,还可以是jQuery对象。
before(function(index)) 使用function(index)函数迭代处理jQuery 所包含的每个节点,在每个节点的前面依次添加function(index)函数的返回值。function(index)函数中的index参数表示当前正在被迭代处理的DOM节点的索引。

把jQuery对象插入到其他元素的前后

方法 描述
insertAfter(selector) 将当前jQuery对象包含的所有DOM节点插入到与selector匹配的所有节点之后。
insertBefore(selector) 将当前jQuery对象包含的所有DOM节点插入到与selector匹配的所有节点之前。

程序示例

下面的程序示范了以上几个插入方法的用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>

<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 插入HTML节点 </title>
</head>

<body>
	<div id="test1" style="border:1px dotted black;">id为test1的元素</div>
	<br />
	<div id="test2" style="border:1px solid black;">id为test2的元素</div>
	<hr />
	<script type="text/javascript" src="../jquery-3.1.1.js">
	</script>
	<script type="text/javascript">
		// 直接将一段HTML字符串插入到id为test1的元素的的前面
		$("#test1").before("<b>疯狂前端开发讲义</b>");

		// 直接将一段HTML字符串插入到id为test1的元素的的后面
		$("#test1").after("<b>疯狂XML讲义</b>");

		// 将id为test2的元素插入hr元素之后
		$("#test2").insertAfter("hr");

		// 使用函数在不同节点前添加不同内容
		$("body>div").before(function (i) {
			return "<div style='font-size:14pt'>" + i + "</div>";
		});
	</script>
</body>

</html>

3.包裹

下面的方法可以将当前jQuery对象里包含的DOM节点包裹起来,也就是在这些DOM节点之前插入开始标签,在其之后插入结束标签。

每个元素都包裹一次

方法 描述
wrap(wrappingElement) 把jQuery对象里的每个DOM元素都进行包裹,jQuery对象里有几个元素就包裹几次。其中node既可以是有开始标签和结束标签的HTML字符串,例如<div></div>;也可以是这些标签所对应的DOM元素。
wrap(function(index)) 使用function(index)函数迭代处理jQuery所包含的每个节点。依次使用function(index)函数的返回值来包裹jQuery对象包含的每个节点。function(index)函数中的index参数表示当前正在被迭代处理的DOM节点的索引。
### 所有的元素当成一个成体包裹一次 ###
方法 描述
wrapAll(wrappingElement) 将jQuery对象里的所有DOM元素当成一个整体进行包裹,不管jQuery 对象里有多少个DOM元素都只包裹一次

包裹节点内部的一部分

方法 描述
wrapInner(wrappingElement) 包裹节点内部的一部分。
wrapInner(function(index)) 使用function(index)函数迭代处理jQuery所包含的每个节点。依次使用function(index)函数的返回值来包裹jQuery对象包含的每个节点的内部成分(不是包裹节点的全部,而是仅包裹节点内部的部分)。function(index)函数中的index参数表示当前正在被迭代处理的DOM节点的索引。
### 解除包裹 ###
方法 描述
unwrap() 该方法是wrap方法的逆向操作,它会去除jQuery对象中所有DOM节点的父元素。

程序示例

下面的页面代码示范了包裹相关方法的用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>

<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 包裹HTML节点 </title>
</head>

<body>
	<span id="test1">id为test1的元素</span>
	<br />
	<span id="test2">id为test2的元素</span>
	<script type="text/javascript" src="../jquery-3.1.1.js">
	</script>
	<script type="text/javascript">
		// // 将每个span元素之外再包裹一个带点线边框的div元素
		$("span").wrap("<div style='border:1px dotted black'></div>");
		// // 将每个span元素内部成分再包裹一个灰色背景的span元素
		$("span").wrapInner("<span style='background-color:#ddd'></span>");
	</script>
</body>

</html>

在浏览器中执行该页面代码可得到如下页面代码：

1
2
3
4
5
6
7
8
9
10
11
<div style="border:1px dotted black">
    <span id="test1">
        <span style="background-color:#ddd">id为test1的元素</span>
    </span>
</div>
<br>
<div style="border:1px dotted black">
    <span id="test2">
        <span style="background-color:#ddd">id为test2的元素</span>
    </span>
</div>

4.替换

下面的方法用于替换DOM节点。

方法 描述
replaceWith(newContent) 将当前jQuery对象包含的所有DOM对象替换成newContent。其中newContent既可以是HTML字符串,也可以是DOM对象,还可以是jQuery对象。
replaceWith(function(index)) 使用function(index)函数迭代处理jQuery所包含的每个节点,依次使用function(index)函数的返回值来替换jQuery对象包含的每个节点。function(index)函数中的index参数表示当前正在被迭代处理的DOM节点的索引。
replaceAll(selector) 将当前jQuery对象包含的所有DOM对象替换成与selector匹配的元素。

5.删除

下面的方法用于删除指定的DOM节点。

方法 描述
empty() 删除当前jQuery对象包含的所有DOM节点里的内容(仅保留每个DOM节点的开始标签和结束标签)。
remove([selector]) 删除当前jQuery对象包含的所有DOM节点。如果指定了selector选择器,则只删除与selector选择器匹配的DOM节点。
detach([selector]) 该方法的功能与remove([selector])方法相似,区别只在于detach()方法会保留被删除元素上关联的jQuery数据,当需要在后面某个时刻重新插入该被删除元素时,则该方法会比较有用。

6.复制

下面的方法用于复制DOM节点。

方法 描述
clone([withDataAndEvents]) 复制当前jQuery对象里包含的所有DOM 元素并且选中这些复制出来的副本。当需要把DOM 文档中元素的副本添加到其他位置时,这个函数非常有用。其中withDataAndEvents 参数是可选的,如果该参数为true,则会复制DOM元素上的事件处理函数。

删除和复制 程序示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>

<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 删除和复制HTML节点 </title>
</head>

<body>
	<div>
		<span id="test1">id为test1的元素</span>
		Java
	</div>
	<span id="test2">id为test2的元素</span>

	<script type="text/javascript" src="../jquery-3.1.1.js">
	</script>
	<script type="text/javascript">
		// 将div元素内容全部清空
		$("div").empty()
			// 重新添加字符串
			.append("重新添加");
		// 删除所有id为test2的span元素
		$("span").remove("#test2");
		// 取得页面中div元素，并复制该元素
		$("div").clone()
			// 添加背景色
			.css("background-color", "#cdcdcd")
			// 添加到body元素尾部
			.appendTo("body");
	</script>
</body>

</html>

原文链接: 3.4.6 操作DOM节点的相关方法