cloneNode()方法可以复制一个节点,该方法能够给节点创建一个副本。
var ele = node.cloneNode(deep);
deep是一个逻辑值:
参数值为true时,复制的节点将包含多有子节点内容;
参数值为false时,赋值的节点仅包含指定对象本身,不包含任何子节点。
<body>
<button>复制</button>
<button>深度复制</button>
<button>删除节点</button>
<hr>
<select class="choices">
<option value="">请选择数字</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>
<script>
var choices = document.querySelector('.choices')
var btn = document.querySelectorAll('button')
var options = document.querySelectorAll('option')
var body = document.body
btn[0].onclick = function(){
// choices.children[0].cloneNode(false) 浅度复制select里的节点
// choices.appendChild 复制完后再放进父节点select
choices.appendChild(choices.children[0].cloneNode(false))
console.log(body);
}
btn[1].onclick = function(){
// choices.children[0].cloneNode(false) 深度复制select里的节点
// choices.appendChild 复制完后再放进父节点select
choices.appendChild(choices.children[5].cloneNode(true))
console.log(body);
}
// 删除指定节点
btn[2].onclick = function(){
choices.removeChild(choices.children[4])
}
</script>
</body>