1. 创建节点
document.createElement(“tagName”)：tagName为HTML标签名，创建一个标签名为tagName的元素节点。
<body><ul><li>熊大</li><li>熊二</li><li>光头强</li></ul></body><script>const li = document.createElement("li");</script>
结果如下：
document.createElement(“tagName”)只是用来创建节点的，如果想要添加到某个元素里面，就需要使用添加节点的方法。
2. 添加节点
node.appendChild(child)：将一个节点(child)添加到指定父节点(node)的子节点列表的末尾；node.insertBefore(child，指定元素)：将一个元素(child)添加到父节点(node)中指定子节点的前面。
<body><ul><li>熊大</li><li>熊二</li><li>光头强</li></ul></body><script>const ul = document.querySelector("ul");const li = document.createElement("li");const li1 = document.createElement("li");li.innerHTML = "hi";li1.innerHTML = "hello";ul.appendChild(li);ul.insertBefore(li1, ul.children[0])</script>
结果如下：
3. 删除节点
node.removeChild(child)：从父节点(node)中删除一个子节点(child)，返回被删除的节点。
<body><ul><li>熊大</li><li>熊二</li><li>光头强</li></ul></body><script>const ul = document.querySelector("ul");ul.removeChild(ul.children[0]);</script>
结果如下：
4. 复制节点(克隆节点)
node.cloneNode(flag)：返回调用该方法的一个节点副本，flag是一个布尔值，如果flag为false或者直接是node.cloneNode()，则相当于浅拷贝，只拷贝元素节点，不拷贝内容，如果flag为true，相当于深拷贝，拷贝元素节点包括内容。
注意：拷贝完之后需要使用添加方法才能添加到某个元素内。
浅拷贝
<body><ul><li>熊大</li><li>熊二</li><li>光头强</li></ul></body><script>const ul = document.querySelector("ul");const li = ul.children[0];const cloneLi = li.cloneNode();// 不包含文本ul.insertBefore(cloneLi, li);</script>
结果如下：
深拷贝
<body><ul><li>熊大</li><li>熊二</li><li>光头强</li></ul></body><script>const ul = document.querySelector("ul");const li = ul.children[0];const cloneLi = li.cloneNode(true);// 包含文本ul.insertBefore(cloneLi, li);</script>
深拷贝结果如下：
