HTML DOM 2：对元素进行增删改查

1.创建一个HTML元素，并把它添加进节点列表

目标是：在JS等编程语言中，以给定内容创建一个新元素a，并让它成为已有元素b的儿子，其顺序在元素c之前
方法是：（1）用var a =document.createElment(“p”);来创建（空的）元素节点。
（2）对a进行一些操作以添加内容，需要用到appendChild方法
（3）用b.appendChild(a)，以追加元素a到b的子树
（4）默认添加为最后一个子节点，用insertBefore实现添加顺序

<p id="p1"> 黑色文本</p>
<script>
var a = document.createElement("p");

//在a中增加文本。其实也就是创建文本节点并让这个文本节点成为a的子节点
var text =document.createTextNode("一些文字");
a.appendChild(text);
//进一步地还可以为a增加属性和属性值。
var href = document.createAttribute("href");//首先，创建一个属性，同时指定它的属性名
href.nodeValue="http://www.baidu.com";//设定属性值
a.setAttributeNode(href);//用setAttributeNode方法把属性对象绑定在元素a上

var b = document.getElementById("p1");
b.appendChild(a);//a是b的lastChild
b.insertBefore(a,c);//a是b的子节点，其顺序恰好放在另一个子节点c之前
</script>

然而，这种方法的style和在CSS里编辑的style，有一些属性，在属性名上略有不同。
在Jquery上有解决方案，可以调整CSS。

2.改变元素的样式

目标是：在JS等编程语言中，改变元素的样式。
方法是：（1）得到元素对象
（2）通过.style.属性名=“新属性值”,以改变元素对象的样式。

<p id="p1"> 黑色文本</p>
<script>
//下面的代码把黑色文本改为红色
var element = document.getElementById("p1");
element.style.color="red";
</script>

然而，这种方法的style和在CSS里编辑的style，有一些属性，在属性名上略有不同。
在Jquery上有解决方案，可以调整CSS。

3.删除节点

//目标：删除已知对象节点a
a.parentNode.removeChild(a);//方法是获取a的父节点并删除父节点的子节点。

//目标：删除已知节点a的已知属性节点b
a.removeAttribute(b.nodeName);//注意这个方法的参数是属性名，而不是节点对象。
a.removeAttribute("class");//所以这样也许更加简便

//目标：删除已知节点a的文本节点
a.innerHTML="";

4.替换节点

//目标：将节点a替换为节点b
a.parentNode.replaceChild(b,a);//b在前面