JavaScript Node节点
2021-10-21 本文已影响0人
微语博客
通过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>
替换节点和移除节点一样，也需要先获取父元素。
