3.4.6 操作DOM节点的相关方法

发表于 更新于 分类于 ， ， Waline： 本文字数： 8.8k 阅读时长 ≈ 8 分钟

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>