JavaScript Node节点

作者: 微语博客 | 来源:发表于2021-10-21 23:12 被阅读0次

JavaScript Node节点
节点操作
2018-06-08 DOM
DOM（Document Object Model）
【DOM】Node类型
【javascript】DOM—节点层次—Node类型
ElasticSearch | 常见的集群部署方式
2016.12.6 JS
kubernetes 节点和组件关系
2018-07-18

通过DOM，JavaScript可以动态移除或添加HTML元素。

添加HTML节点

要创建新的 HTML 元素，需要先创建一个元素，然后在已存在的元素中添加它。使用 creatElement('element') 创建新元素，使用 createTextNode('text') 创建文本，使用 appendChild(node) 将节点添加到父元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="container">
    <p id="content1">这是一个段落。</p>
    <p id="content2">这是另外一个段落。</p>
  </div>
  <script>
    var para = document.createElement("p");
    var node = document.createTextNode("这是一个新的段落。");
    para.appendChild(node);    
    var element = document.getElementById("container");
    element.appendChild(para);
  </script>
</body>
</html>

如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="container">
      <p id="content1">这是一个段落。</p>
      <p id="content2">这是另外一个段落。</p>
  </div>
  <script>
      var para = document.createElement("p");
      var node = document.createTextNode("这是一个新的段落。");
      para.appendChild(node);    
      
      var element = document.getElementById("container");
      var child = document.getElementById("content1");
      element.insertBefore(para, child);
  </script>
</body>
</html>

移除已存在的元素

使用 node.remove(child) 方法可以移除一个元素，前提是知道被移除元素的父元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="container">
      <p id="content1">这是一个段落。</p>
      <p id="content2">这是另外一个段落。</p>
  </div>
  <script>      
      var parent = document.getElementById("container");
      var child = document.getElementById("content1");
      parent.removeChild(child);
  </script>
</body>
</html>

使用子节点找到父节点，然后再移除子节点，这样可以避免直接去找父节点。

var child = document.getElementById("content1");
child.parentNode.removeChild(child);

替换HTML元素

使用 replaceChild() 方法可以替换 HTML DOM 中的元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="container">
      <p id="content1">这是一个段落。</p>
      <p id="content2">这是另外一个段落。</p>
  </div>
  <script>
      var para = document.createElement("p");
      var node = document.createTextNode("这是一个新的段落。");
      para.appendChild(node);

      var parent = document.getElementById("container");
      var child = document.getElementById("content1");
      parent.replaceChild(para, child);
  </script>
</body>
</html>