JavaScript HTML DOM元素（节点）
讲义JS入门教程: B站JS入门教程的代码及讲义内容 (gitee.com)第17讲
常见新的HTML DOM元素（节点）
使用 appendChild()方法
appendChild() 方法将节点（元素）作为最后一个子元素添加到元素。
例子1：
在列表中添加项目：
const node = document.createElement("li");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
例子2：
从一个列表向另一个列表中移动列表项：
const node = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(node);
移动之前：
- Coffee
- Tea
- Water
- Milk
移动之后：
- Coffee
- Tea
- Milk
- Water
例子 3
创建带文本的段落：
- 创建段落元素
- 创建文本节点
- 向段落追加文本节点
- 向文档追加段落
创建一个
元素并将其追加到
元素：
const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);
例子 4
创建一个
元素并将其追加到文档的正文中：
const para = document.createElement("P");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.body.appendChild(para);
语法
<pre><i>element</i>.appendChild(<i>node</i>)</pre>
或
<pre><i>node</i>.appendChild(<i>node</i>)</pre>
insertBefore() 方法在现有子节点之前插入子节点。用法一致不过多介绍
removeChild()方法
定义和用法
removeChild() 方法删除元素的子节点。
该方法以 Node 对象返回被删除的节点；如果节点不存在，则返回 null。
提示
子节点从是文档对象模型（DOM）中删除的。
但是，可以修改返回的节点并将其插回 DOM（请参阅下方的实例）。