JS中动态增删改元素 JS中动态增删改元素

【JS中动态增删改元素】在JS中动态增删改元素

document.createElement 创建元素对象
document.createTextNode 创建文本对象
document.appendChild 把元素添加到容器的末尾
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 = '是开发决胜巅峰'document.body.appendChild(box2) document.body.appendChild(box3) // 容器.removeChild(元素) document.body.removeChild(box2)