DOM方法

修改HTML文档结构，常用的做法：

在文档加载之前，可以用document.write来修改文档结构。

文档加载完成后，可以给元素节点的innerHTML来修改HTML内容。

1.这两个方法都有一定的限制，write方法必须在文档加载前，否则会讲现有的文档覆盖掉。即在载入页面后，浏览器输出流自动关闭。在此之后，任何一个对当前页面进行操作的document.write()方法将打开—个新的输出流，它将清除当前页面内容(包括源文档的任何变量或值)。

2.innerHTML只能对一块整体进行操作，不能对内部进行详细设置。如果想设置详细内容则需要用到DOM方法。

总结：document.write比较危险，不推荐使用。粗略的操作元素节点内内容时，innerHTML方便快捷，推荐使用。详细操作时推荐用DOM方法。

DOM创建元素节点

var element = document.createElement(“p”);

之前的例子可以看到，段落标签的p中得文本，其实是p下面的一个子节点，即文本节点所拥有的值，name要显示文本，则需要在p标签下，创建一个文本子节点。

var other.appendChild(element) //添加到某个节点内

var txt = document.createTextNode(“text”);

实际例子

<div id="root">
</div>

<script>
var p = document.createElement("p");
var txt = document.createTextNode("hello text");
p.appendChild(txt); //将txt文本节点添加到元素节点p下面

var root = document.getElementById("root"); //获取要讲p内容插入的根位置
root.appendChild(p);//将元素节点p插入root
</script>
</span>

指定插入节点位置

function myInsertAfter(newElement, targetElement)
{
	var parent = ...//指定要插入节点的父节点
	if (parent.lastChild == targetElement)
	{
		parent.appendChild(newElement);
	}
	else
	{
		//将节点插入下下一个之前，也就是某个节点之后啦
		parent.insertBefore(newElement, targetElemnt.nextSibling); 
	}
}