在JS中动态创建，删除，克隆元素
createElement创建元素
createTextNode创建文本对象
appendChild把元素添加到容器的末尾
insertBefore把元素放到指定元素的前面
创建元素
<div id="aaa">hahaha</div>
<script>
//动态创建一个元素对象
let box=document.createElement('div');
box.id='boxActive';
box.style.width='200px'
box.style.height='200px'
box.className='RED'
//动态创建一个文本节点
let text=document.createTextNode('shangixiaolin');
console.log(text);
//添加 容器.appendChild(元素)
box.appendChild(text)
//添加到页面的后边
// document.body.appendChild(box);
//添加到指定元素的前边 容器.insertBefore(新增元素，指定元素)
let haha=document.getElementById('aaa');
//haha.parentNode.insertBefore(box,haha)
document.body.insertBefore(box,haha)
</script>
cloneNode(true/flase)深/浅克隆元素或者节点
removeChild移除容器中的某个元素
<style>
.box{
margin-top: 20px;
width: 100px;
height: 100px;
background-color: lightblue;
}
.box span{
color: red
}
</style>
<div class="box">
<span>yijecj</span>
</div>
<script>
//clone node
let box1=document.querySelector('.box')
//第一份儿深克隆
let box2=box1.cloneNode(true)
//第二份儿浅克隆
let box3=box1.cloneNode(false)
document.body.appendChild(box2)
document.body.appendChild(box3)
// 删除box2
document.body.removeChild(box2)
</script>
深/浅克隆box1
移除box盒子.png
