元素的增删改查

增

创建元素：document.createElement("x")，这个元素是不会渲染到页面上的，不在DOM中

var box2=document.createElement("div")//传入的字符串  是标签的名字

给元素增加类名：className classList className：

box2.className="box2"
添加多个类名需要用空格隔开
box2.className="box2 box3"//可以添加相同的类名

classList：用add方法添加

box2.classList.add("box2")
box2.classList.add("box3")
box2.classList.add("box3")//同样的类名只会添加一个

删除类名：remove（）

box2.classList.remove("box2")

添加节点x.appendChild(y) ，把y节点对象添加到x节点中可以将不在文档树中的节点添加到文档树中，常常与createElement()方法一起使用

var box2=document.createElement("div")
box.appendChild(box2)

innerHTML:使用innerHTML时会将容器内的所有代码替换，如果想保留以前的代码并且增加代码可以创建一个元素将以前的代码和你需要添加的代码加在一起存放

列；

var box2 = document.createElement("div")
var box3 = document.createElement("div")
box3.className = "box3"
box3.innerHTML = "box3"
box2.appendChild(box3)
box2.innerHTML += "<h1>666</h1>"//将你原来的代码与你需要添加的代码加起来存放在一起
console.log(box2.innerHTML, 1111111111)

删

父元素删除子元素：parentElement.removeChild()

var box=document.querySelector("#box")
box.parentElement.removeChild(box)

自己移除：

box.remove()

清空自己：

var box=document.querySelector("#box")
box.parentElement.innerHTML=""

克隆

cloneNode()：不会克隆事件等

var box = document.querySelector("#box")
var box2=box.cloneNode()//不会克隆box的事件等

cloneNode(true)：连同被克隆对象的后代元素和所有的事件一起克隆

var box = document.querySelector("#box")
var box2=box.cloneNode(true)//连同box的后代元素和所有的事件一起克隆

DOM2---元素的增删改查

元素的增删改查

增

删

克隆