javaScript DOM 编程艺术（二）

时隔好几天，原本的意愿是打算记录每天的学习所得，但是事与愿违，最近都在加班，后面又由于自身惰性，一直推迟到现在。这本书实际上我已经看完好几天了，趁还没有忘光，记录一下！ 接着上一篇，又学到了几个新的关于DOM的API。

document.careateElement() 该API的作用是创建一个元素，但新创建的元素并不会直接显示在文档树上，他处于游离状态，要将创建的元素添加到文档树上需要使用到另一个api。

parentElement.insertBefore(newElement,targetElement)该API的作用是，将一个元素插入某个拥有父元素之前，该API接收三个参数，newElement为需要插入的元素节点，targetElement为插入的目标节点，parentElement为目标节点的父元素。

//html
<div id='div'></div>
//js
 let p = document.createElement('p');
 let div = document.getElementById('div');
 div.parentNode.insertBefore(p,div);
 

上述代码，创建了一个p标签，将p标签插入到div标签之前。这里使用到了element.parentNode，该API返回指定元素的元素。但插入一个p标签却没有任何内容显示。要想在p元素里面显示文本，这时就涉及到一个新的概念——节点，文档是由许多节点组成的一颗类似树结构的内容，根节点为html元素。元素比如p、div并不是最小节点，其中文本节点就是元素节点的一个子节点。可以通过document.carateTextNode()创建一个文本节点，使用该方法创建的节点也是处于游离的状态，可以通过element.appendChild()添加到某个元素下。将上述代码修改一下：

//html
<div id='div'></div>
//js
 let p = document.createElement('p');
 let text = document.createTextNode('this is a p');
 p.appendChild(text);
 let div = document.getElementById('div');
 div.parentNode.insertBefore(p,div);

通过appenChild就可以将文本添加到指定元素下面啦。另外element.nextSibling该API返回指定元素的下一个元素。由于DOM没有提供类似insertAfter这样将一个元素插入到另一个元素后面的API，所以可以自己实现一个这样的函数。

function insertAfter(newElement,targetElement) {
    let parentElement = targetElement.parentNode;
    if(parentElement.lastChid == targetElement) {
        parrentElement.appendChild(newElement);
    } else {
        parrentElement.appendChild(newElement,targetElement.nextSibling);
    }
}

今天就先到这里啦。睡觉去