JS中动态增删改元素

在JS中动态增删改元素

1. document.createElement 创建元素对象
2. document.createTextNode 创建文本对象
3. document.appendChild 把元素添加到容器的末尾
4. document.insertBefore 把元素添加到指定容器中指定元素的前面

// 动态创建一个div元素对象 把其赋给BOX
let box = document.createElement('div')
box.id = 'boxActive'
box.style.width = '200px'
box.style.height = '200px'
box.className = 'RED'

// 动态创建一个文本
let text  = document.createTextNode('疫情快点结束')
// 添加： 容器.appendChild(元素)
document.body.appendChild(box)
box.appendChild(text)

// 放到指定元素前：容器.insertBefore([新增元素],[指定元素])
let insert = document.getElementById('insert')
document.body.insertBefore(box,insert)

// document.cloneNode(boolean) 克隆  true:深克隆   false:浅克隆

let box1 = document.querySelector('.box')
// 深克隆
let box2 = box1.cloneNode(true)
box2.querySelector('span').innerText = '奥斯卡就开打'
//浅克隆
let box3 = box1.cloneNode(false)
box3.innerHTML = '<span>是开发决胜巅峰</span>'

document.body.appendChild(box2)
document.body.appendChild(box3)
// 容器.removeChild(元素)
document.body.removeChild(box2)