节点操作
创建节点
document.createElement('tagName')
document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在,是根据我们的需求动态生成的,所以我们也成为动态创建元素节点。
添加节点
node.appendChild(child)
node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css中的after伪元素。
<body>
<ul>
</ul>
<script>
//创建元素节点
var li =document.createElement('li');
//添加节点
var ul = document.querySelector('ul');
ul.appendChild(li);
</script>
</body>
node.insertBefore(child,指定元素)
node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。
var lili = document.createElement('li');
ul.insertBefore(lili,ul.children[0]);
删除结点
node.removeChild(child);
node.removeChild()方法从DOM中删除一个子节点,返回删除的结点。
<body>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.removeChild(ul.child[0]);
</script>
</body>
复制结点
node.cloneNode();
node.cloneNode()方法返回调用该方法的结点的一个副本。也称为克隆节点或者拷贝节点。括号里面为空或者false为浅拷贝,只复制结点不复制内容。括号里面为true为深拷贝,复制节点,复制内容
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
</script>
</body>