我们很多时候都要进行动态的添加元素，因为一个页面是从上到下执行的，我们在写CSS时就有很好的体会，如果当一个元素在一定条件下触发后再添加，那么整个页面在开始是就会少加载很多东西，并且也不会影响体验。
动态创建方法：
- document.write():
整个方法可以动态创建元素，但是他也有一定的问题，无法达到："行为与表现分离"，什么是行为与表现分离？比如：点击（元素 A onclick 和 元素A 显示为剧中红色背景，这就是一个行为和一个表现，怎么分离？就是 分为多文件引入样式和JS进行分解，这里是粗暴的理解，更多请上网搜索，其实有点类似于封装的作用），此方法还有一个问题就是MIME application/xhtml-xml 与之不兼容
2.innerHTML:
可以用来读写给定元素的HTML内容，并且是读取一段内容，注意如果你向某个元素中插入一段内容，将会替换掉原来的内容
3.creatElement:
在我们之前学习到了节点这个名词，其实在对页面进行添加修改的过程中就是在改变节点的内容。我们可以用creatElement元素来创建一个节点并添加到一个节点上：
<div id="addnote"></div>
(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);
}
}
网友评论