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>

指定插入节点位置

parentElement.insertBefore(newElement, targetElement); //指定要插入父节点中某个子节点的前面即可进行定位。

注意，dom中没有提供insertAfter的方法。这个可以自己编写代码实现

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

<完>