DOM 添加节点学习笔记
本文介绍DOM（文档对象模型）中添加节点的相关知识。
1. 创建新节点
要在DOM中插入新节点，首先需要创建一个新节点。可以使用 document.createElement(tagName) 方法来创建新节点。tagName 是要创建的节点类型，例如 div、p 等。例如：
javascriptCopy Codelet newDiv = document.createElement('div');
这个代码会创建一个新的 div 节点，并把它保存在变量 newDiv 中。
2. 添加子节点
要在DOM中添加子节点，可以使用 appendChild() 方法。该方法接受一个节点作为参数，将其作为最后一个子节点添加到调用它的节点中。例如：
javascriptCopy Codelet container = document.getElementById('container');
container.appendChild(newDiv);
这个代码会在拥有 id 属性值为 container 的元素中添加一个新的 div 子元素。
3. 插入节点
要在DOM中插入一个节点，可以使用 parentNode.insertBefore(newNode, referenceNode) 方法。该方法在 referenceNode 节点之前插入新节点 newNode 作为 parentNode 的子节点。例如：
javascriptCopy Codelet referenceNode = document.getElementById('reference');
let parentNode = referenceNode.parentNode;
parentNode.insertBefore(newDiv, referenceNode);
这个代码会在拥有 id 属性值为 reference 的元素之前插入一个新的 div 子元素。
4. 删除节点
要从DOM中删除一个已有的节点，可以使用 parentNode.removeChild(node) 方法。该方法从 parentNode 中删除 node 节点。例如：
javascriptCopy Codelet nodeToRemove = document.getElementById('toremove');
let parentNode = nodeToRemove.parentNode;
parentNode.removeChild(nodeToRemove);
这个代码会移除拥有 id 属性值为 toremove 的节点。
5. 实例
下面是一个实际的例子，它演示了如何在DOM中插入一些新的节点：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>添加节点示例</title>
<style type="text/css">
.container {
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h1>添加节点示例</h1>
<div class="container" id="container">
<p>一些文本。</p>
<p>更多的文本。</p>
</div>
<script type="text/javascript">
let newDiv = document.createElement('div');
let newText = document.createTextNode('这是一个新的段落。');
newDiv.appendChild(newText);
let container = document.getElementById('container');
container.appendChild(newDiv);
let referenceNode = document.createElement('p');
let referenceText = document.createTextNode('这个新段落将插入在这个段落之前。');
referenceNode.appendChild(referenceText);
container.insertBefore(referenceNode, container.childNodes[0]);
let nodeToRemove = document.getElementById('remove-me');
let parentNode = nodeToRemove.parentNode;
parentNode.removeChild(nodeToRemove);
</script>
</body>
</html>
这个示例会在拥有 id 属性值为 container 的元素中添加一个新的 div 子元素，并在该 div 元素中添加一个新段落。然后，它会在第一个段落之前插入一个新段落，并且移除拥有 id 属性值为 remove-me 的节点。