DOM操作HTML

有的时候工作需要，为了方便给HTML添加元素，我们可以使用js的DOM来实现操控。
#一.创建
创建元素，这里我示例创建一个select标签
var p = document.createElement(‘p’);
然后我还可以给它添加或修改内容。
p.innerHTML = ‘今天风好大呀！’;
还可以创建文本
var text = document.createTextNode(“天气也变温了”);
创建注释
var comment = document.createComment(“这是一个注释”);
元素创建好了还需要添加到DOM树上。
比如，将p标签添加到body页面
document.body.appendChild§;
也可以选择指定父级标签下添加。
比如将p标签添加到div的盒子里面去
div.appendChild§;

#二.插入
如果说，要往页面里面插入元素，首先要获得父级的所有子节点，要插入位置的后面的元素节点，再进行创建新元素，添加新元素的内容，再写入以下代码
div.insertBefore(p,span);
这段代码的意思是，在div这个父级元素下，在span标签的前面位置，插入p标签。

#三.替换
var sapn = document.getElementsByTagName(“span”)[0];
var h1 = document.createElement(“h1”);
h1.innerHTML = “加油，奋斗！！！”;
div.replaceChild(span,h1);
##1.这里首先查找要替换的子元素
##2.创建一个新元素
##3.给新元素添加内容
##4.在div这个父级元素下，用h1标签替换里面的span标签。

四.删除
删除的方法有两种，指定删除，和自我删除
##1.指定删除就是指定在哪个父级元素下的元素删除
比如我要删除div下面的span标签，那么执行以下代码
var div = document.getElementsByTagName(“div”)[0];
先找到div里面元素
div.removeChild(span);
然后执行在div这个父级元素下的审判标签进行删除
##2.自我删除，就是找到自己的准确元素自己删除
span.remove();
直接元素进行删除。