方法一：
使用DOM.setAttribute("class","类名")
方法二：
DOM.classList.add("类名")
方法一给DOM元素添加类名会覆盖原有的类名
方法二 可以给DOM元素添加一个类名后 还可以在继续给DOM元素添加新的类名 并且不会覆盖已有的类名
概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加。
使用方式：fatherdom.appendChild( insertdom )。
兼容性：所有浏览器都支持此方法。
概念：把要插入的节点添加到指定父级里面的指定节点之前。
使用方式：fatherdom.insertBefore( insertdom，chosendom )。
兼容性：所有浏览器都支持此方法，但是值得注意的是，如果第二个参数节点不存在，在IE和Safari下会把要添加的节点使用appendChild()方法追加到指定父级中，而其他主流浏览器（Firefox、Chrome、Opera等）下会报错，所以在插入节点的时候，需要先判断第二个参数节点是否存在
效果
注意：很多人都认为设置disabled="true"是为启用，设置为“false”时为禁用，这是错的。
js操作节点的DOM方法
一、创建节点
createElement
createTextNode
二、添加、删除、替换、克隆元素
1、appendChild
2、insertBefore
3、如果appendChild、insertBefore追加的是已经存在的子元素，实际上就会将子元素位置移动
4、删除节点removeremoveChild
remove()
removeChild
5.替换节点
replaceChild
6、克隆节点
cloneNode()
三、操作元素属性的方法
1.获取属性 元素.属性名
2.设置属性 元素.属性名 = 属性值
1、2方法只能获取和设置元素自带的属性
3.操作属性的万能方法
getAttribute()
setAttribute()
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var $ = function(args){
return document.getElementById(args)
}
var add = $("add")
var rep = $("replace")
var rem = $("remove")
var dom, h
add.onclick = function(){
//新增
dom = document.createElement("p")
dom.innerHTML="<span style='color:red'> 这是一个被p标记包含的 span 标签</span>"
document.body.appendChild(dom)
}
rep.onclick = function(){
//替换
h = document.createElement("h1")
h.innerHTML="<span style='color:green'> 这是一个被h1标记包含的 span 标签</span>"
document.body.replaceChild(h,dom)
dom = null
}
rem.onclick = function(){
//删除
if(dom){
document.body.removeChild(dom)
}else if(h){
document.body.removeChild(h)
}
}
}
</script>
</head>
<body>
<input type="button" value="新增" id="add"/>
<input type="button" value="替换" id="replace"/>
<input type="button" value="删除" id="remove"/>
</body>
</html>
