[原]读-DOM编程艺术5-创建动态标记

    我们很多时候都要进行动态的添加元素，因为一个页面是从上到下执行的，我们在写CSS时就有很好的体会，如果当一个元素在一定条件下触发后再添加，那么整个页面在开始是就会少加载很多东西，并且也不会影响体验。

动态创建方法：

1. document.write():

    整个方法可以动态创建元素，但是他也有一定的问题，无法达到："行为与表现分离"，什么是行为与表现分离？比如：点击（元素 A onclick 和 元素A 显示为剧中红色背景，这就是一个行为和一个表现，怎么分离？就是 分为多文件引入样式和JS进行分解，这里是粗暴的理解，更多请上网搜索，其实有点类似于封装的作用），此方法还有一个问题就是MIME application/xhtml-xml 与之不兼容

2.innerHTML:

    可以用来读写给定元素的HTML内容，并且是读取一段内容，注意如果你向某个元素中插入一段内容，将会替换掉原来的内容

3.creatElement:

    在我们之前学习到了节点这个名词，其实在对页面进行添加修改的过程中就是在改变节点的内容。我们可以用creatElement元素来创建一个节点并添加到一个节点上：

(1)创建节点：

var p = document.creatElement("p");

这样我们就创建了一个p元素，他具有一个元素的所有属性，比如nodeType
(2)添加节点：添加节点之前我们要确定其要在哪儿添加

var parent = getElementById("addnote");

然后通过appendChild方法进行添加：

parent.appendChild(p);

(3)给节点添加内容：

    我们把节点都添加好了，这个时候我们就需要加一些内容了，首先我们要创建一个存放文本的文本节点（之前说过节点有三种类型）

var text = document.createTextNode("我是帅哥")；

创建成功以后我们肯定要讲其添加到节点下（p）

p.appendChild(text);

完整的代码如下：我们将其设置为文档加载完成后就执行

window.onload = function(){
    var parent = getElementById("addnote");
    var p = document.creatElement("p");
    var text = document.createTextNode("我是帅哥")；
    p.appendChild(text);
    parent.appendChild(p);
}

    我们在为页面添加元素时，我们要掌握一个方法，那就是节点树，画出一个节点树，然后通过上面的方法就能一步一步的添加更加复杂的元素。

insertBefore可以在一个元素的前面插入，例如：

parent.insertBefore(newElement，targetElement)；

有了before就有after，但是DOM根本就没有提供这个方法，可是也是我们需要的，所以我们就需要自己封装一个insertAfter方法：

function insertAfter(newElement，targetElement){
    var parent = targetElement.parentNote;//获取目标元素的父元素
    if(parent.lastChild == targetElement ){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}