JavaScript dom 动态建立标记

此前的大多数DOM都是用来查找元素，getElementById和getElementsByTagName均可以方便快捷的找到文档中的某个或者某些特定的元素节点，这些元素随后能够用诸如setAttribute（改变某个属性的值）和nodeValue（改变某个元素节点所包含的文本）之类的方法和属性来处理。都是对已经存在的元素作出修改。

 

本文将经过建立新元素和修改现有元素来改变网页结构

 

标准的DOM方法能够用来替代innerHTML，他提供了更高的精确性和更强大的功能！

DOM方法：

浏览器显示的内容其实都是属于DOM节点树的，在浏览器看来，DOM节点树才是文档

动态建立标记不是在建立标记，而是在改变DOM节点树。

在DOM看来，一个文档就是一颗节点树。若是你想要从节点数上添加内容，就必须插入新的节点。若是你想添加一些标记到文档，就必须插入元素节点

 

createElement方法：建立元素节点（诸如<p>,<a>,<span>......）

格式：document.createElement("标签名")；

新建立出来的标签已经存在了，可是还不属于任何一颗DOM节点数的组成部分，他只是在js世界的一个孤儿而已，称为：文档碎片（document fragment）

其nodeName=p，nodeType=1

createTextNode方法：建立文本节点（即添加标签内的内容）

格式：document.createTextNode("内容")；

 

appendChild方法：链接（把游离在js世界的孤儿，加入到节点树，找到他的家）

格式：parent.appndChild(child)；

 

有两个顺序方法：

1. 先建立标签，而后把标签追加到节点树种，再建立内容，把内容追加到标签后面

2. 见建立标签，在建立内容，把内容追加到标签里面，而后把标签再追加到节点树中

　　本人比较喜欢第二种写法，感受思路会比较清晰　　

 

例子：在body里面添加一个p标签，在p里面建立一个em标签，内容是：<p>This is <em>my</em> content</p>;

 

 

特别提醒：使用appendChild属性插入文本内容不会把以前标签的内容覆盖掉，这个能够与innerHTML对比一下

 

从上面截图能够发现一个新的问题：<p>标签插在了<script>标签以后，由于插入的标签都是默认自动会排在全部子节点以后 这时咱们须要新的方法来控制元素插入的位置；

 

 

元素插入位置设置：

 

insertBofore()方法：这个方法将把一个新元素插入到一个现有元素的前面；

格式：parentElement(目标元素的父元素).insertBefore(newElement(新元素),targetElement(目标元素))

介绍：parentNode：获取文档层次中的父对象

技巧：其实并不须要麻烦去找目标元素的父元素，能够利用parentNode，目标元素的父元素 = targetElement.parentNode

 

惋惜的是：咱们有一个insertBefore的方法，却没有一个insertAfter的方法；可是咱们能够本身写一个insertAfter()函数来代替

insertAfter()函数：

思路：

1. 判断目标元素是不是parent的最后一个元素，
2. 若是是，则使用appenChild把新元素插在目标元素以后
3. 若是不是，则使用insertBofore把新元素插在目标元素的下一个子元素以前。

介绍：nextSibling属性：表示当前节点的下一个节点（其后的节点与当前节点同属一个级别）；若是其后没有与其同级的节点，则返回null。