一、对文档树中的节点进行添加
示例代码:(以此进行后续操作的代码示例)
<style>
.box {
width: 400px;
height: 400px;
background-color: pink;
}
.box1 {
width: 100px;
height: 100px;
background-color: aqua;
}
.box2 {
color: red;
}
</style>
<div id="box"></div>
获取需要添加的元素box
var box=document.querySelector("#box")
创建元素box1:该元素不会渲染到页面上,因为它不是在文档树中而是在内存中
var box1=document.createElement("div") //传入的字符串是标签的名字
添加元素:该元素会渲染到页面中 (把box1添加到box中)
box.appendChild(box1) //将box1添加到box中
//x.appendChild(y) 把y节点对象添加到x节点中
给box1添加内容:
box1.innerHTML = "这是添加的box1的内容"
给box1添加样式
- className 为对应节点设置已有的样式
- classList 类名列表 为节点添加一个或多个类名 add函数添加类名 remove函数删除类名
添加单个:
box.className="box" //给box添加一个样式
box1.className="box1" //给box1添加一个样式
添加多个:
box1.className="box1 box2"
//相当于
box1.className="box1"
box1.className=box1.className+" box2" //注意有空格
//相当于
box1.classList.add("box1")
box1.classList.add("box2") //可以多次添加类名
box1.classList.add("box2") //重复添加只添加一次
注:单个类名建议用className 多个类名建议用classList.add()
删除类名:
box1.classList.remove("box2") //移除box2保留box1的样式
注意:
当box内部添加了box1后还想继续添加其他内容时,用了innerHTML来添加会覆盖box内部的所有元素
解决方案:创建一个元素 把哈哈哈作为该元素的innerHTML 再把它添加到box中
box.appendChild(box1) box.innerHTML = "哈哈哈" //哈哈把box内部的所有元素全部覆盖了 box.innerHTML=box.innerHTML+"哈哈哈" //解决的方法
二、对文档树中的节点进行删除
- 通过父元素删除子元素自己
var box=document.querySelector("#box")
var box1=document.createElement("div")
box.appendChild(box1)
box1.parentElement.removeChild(box1) //删除box1
- 直接删除自己
box1.remove() //删除box1
- 清空自己(包括父元素的其他子元素)
box1.parentElement.innerHTML="" //内容设置为空
三、克隆(复制)元素
- cloneNode() :可实现节点的精确拷贝
var box=document.querySelector("#box")
var box2=box.cloneNode() //不会克隆事件等 只克隆当前节点(标签)
var box2=box.cloneNode(true)//连同box的子孙节点和所有的事件 一起克隆 深度克隆