# JavaScript教程 - 15 DOM

DOM 继续！

# 15.10 节点操作

上面介绍如何查找元素，以及修改元素的文本和属性。

下面来介绍如何添加、删除、替换节点，实现页面的更新。

# 1 添加节点

上面介绍了如何获取节点和修改节点的属性，下面来学习如何创建节点并添加到页面上，以及删除节点。

举个栗子：

下面在点击按钮的时候，动态的向 <ul> 列表中添加 <li> 元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>For技术栈</title>

    <script>
      window.onload = function () {
        // 首先获取到ul，然后操作在ul中添加元素
        const parent = document.getElementById('course-wrapper');
        // 获取按钮
        const addButton = document.getElementById('add-button');

        // 给按钮添加点击事件
        addButton.onclick = function() {

          // 创建<li>
          const li = document.createElement('li');
          // 对li元素进行设置
          li.textContent = 'JavaScript教程';

          // appendChild给节点添加子节点
          parent.appendChild(li);
        };
      };
    </script>
  </head>
  <body>
    <button id="add-button">添加</button>
    <ul id="course-wrapper">
      <li>HTML5教程</li>
      <li>CSS3教程</li>
    </ul>
  </body>
</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
32
33
34
35
36

首先使用 document.createElement('li') 来创建 <li> 元素；
然后使用 appendChild() 方法，给节点的最后添加子元素。

显示如下：

上面在添加节点的时候，是添加到父节点的末尾，还可以指定一个兄弟节点，将节点插入到兄弟节点之前：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>For技术栈</title>

    <script>
      window.onload = function () {
        // 首先获取到ul，然后操作在ul中添加元素
        const parent = document.getElementById('course-wrapper');
  
        const cssCourse = document.getElementById('css-li');
        // 获取按钮
        const addButton = document.getElementById('add-button');

        // 给按钮添加点击事件
        addButton.onclick = function() {

          // 创建<li>
          const li = document.createElement('li');
          // 对li元素进行设置
          li.textContent = 'JavaScript教程';

          // 将<li>插入到cssCourse节点之前
          parent.insertBefore(li, cssCourse);
        };
      };
    </script>
  </head>
  <body>
    <button id="add-button">添加</button>
    <ul id="course-wrapper">
      <li>HTML5教程</li>
      <li id="css-li">CSS3教程</li>
    </ul>
  </body>
</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
32
33
34
35
36
37
38

在上面的代码中，使用 parent.insertBefore(li, cssCourse); 将 <li> 插入到 cssCourse 节点之前。

还有一个 insertAdjacentElement() 方法，它可以将元素添加到父元素的前面、后面、父元素中第一个位置和父元素最后的位置。

举个栗子：

let target = document.getElementById("target");
let newDiv = document.createElement("div");
newDiv.textContent = "新的元素";

target.insertAdjacentElement("beforebegin", newDiv);  // 在 target 前面，和target同级
target.insertAdjacentElement("afterend", newDiv);  // 在 target 后面，和target同级

target.insertAdjacentElement("afterbegin", newDiv);  // 作为target的第一个子元素
target.insertAdjacentElement("beforeend", newDiv);  // 作为target的最后一个子元素

1
2
3
4
5
6
7
8
9

上面在添加节点的时候，首先创建节点，并设置节点的属性，然后将节点添加到页面中，这样操作稍微有一点麻烦。我们还可以直接使用 HTML 字符串进行添加。

举个栗子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>For技术栈</title>

    <script>
      window.onload = function () {
        // 首先获取到ul，然后操作在ul中添加元素
        const parent = document.getElementById('course-wrapper');
  
        // 获取按钮
        const addButton = document.getElementById('add-button');

        // 给按钮添加点击事件
        addButton.onclick = function() {
          // 直接插入
          parent.insertAdjacentHTML("beforeend", "<li>我插进来了</li>");
        };
      };
    </script>
  </head>
  <body>
    <button id="add-button">添加</button>
    <ul id="course-wrapper">
      <li>HTML5教程</li>
      <li id="css-li">CSS3教程</li>
    </ul>
  </body>
</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

使用 insertAdjacentHTML() 可以直接通过字符串来插入节点，同时可以使用 beforebegin/afterend/afterbegin/beforeend 指定插入的位置。

内容未完......

查看完整内容 →

← 15-DOM-2 15-DOM-4 →