节点操作
1. 创建节点
document.createElement()
2. 添加节点
2.1 node.appendChild(child) 添加到子元素数组的末尾
<body><ul><li>I'm here</li></ul><script>var ul = document.querySelector('ul');// 创建节点var li = document.createElement('li');// appendChild() 添加到末尾ul.appendChild(li);console.log(ul);</script></body>
以上代码得到结果：
这里我给li加了一个样式list-style: none;去除前面小圆点。我们可以看到创建的li添加到了原有小li的后面。
2.2 node.insertBefore(child, 指定元素) 添加到指定子元素的前面
<body><ul><li>I'm here</li><li>wow</li></ul><script>var ul = document.querySelector('ul');// 创建节点var li = document.createElement('li');// insertBefore() 添加到指定元素的前面ul.insertBefore(li, ul.children[1]);console.log(ul);</script></body>
以上代码得到结果：
我们把创建的li添加到了第二个子元素的前面。
3. 删除节点
3.1 node.removeChild(child) 删除指定子节点，返回删除的节点
<body><ul><li>I'm here</li><li>wow</li></ul><script>var ul = document.querySelector('ul');// removeChild() 删除节点 返回删除的节点ul.removeChild(ul.children[0]);console.log(ul);</script></body>
以上代码得到结果：
第一个子节点被删除了。
4. 复制节点
4.1 cloneNode() 复制节点
复制节点要注意，cloneNode()括号里面为空或者里面是false则为浅拷贝，只复制标签不复制里面的内容。cloneNode(true) 括号里为true则为深拷贝，复制标签和里面的内容。
<body><ul><li>I'm here</li><li>wow</li></ul><script>var ul = document.querySelector('ul');// 克隆节点// cloneNode()括号里面为空或者里面是false 浅拷贝 只复制标签不复制里面的内容// cloneNode(true) 括号里为true 深拷贝 复制标签复制里面的内容var li1 = ul.children[0].cloneNode(true);var li2 = ul.children[1].cloneNode();ul.appendChild(li1);ul.appendChild(li2);console.log(ul);</script></body>
以上代码得到结果：
不要忘记克隆之后还要添加节点~
