鏈接地址:http://blog.csdn.net/hj7jay/article/details/53389522
1、節(jié)點(diǎn)創(chuàng)建API
節(jié)點(diǎn)創(chuàng)建API主要包括 createElement 、 createTextNode 、 cloneNode 和 createDocumentFragment 四個(gè)方法。
通過 createElement 創(chuàng)建的元素并不屬于 document 對(duì)象,它只是創(chuàng)建出來,并未添加到html文檔中,要調(diào)用 appendChild 或 insertBefore 等方法將其添加到HTML文檔中。
html:
<p id="test1">1111</p>
<p>2222</p>
<p>3333</p>
js:
var test1=document.getElementById("test1");
var node = document.createElement("p");
node.innerHTML = '8888';
test1.insertBefore(node,test1.childNodes[0]);
//在111之前添加一個(gè)節(jié)點(diǎn)插入8888,這里的test1.childNodes[0]指的是在第一個(gè)節(jié)點(diǎn)前插入。
var test1=document.getElementById("test1");
var node = document.createElement("p");
node.innerHTML = '6666';
test1.appendChild(node);
//在111之后添加節(jié)點(diǎn)插入6666
appendChild和insertBefore語法:
parent.appendChild(child);//把孩子節(jié)點(diǎn)插入到父節(jié)點(diǎn)之后
parentNode.insertBefore(newNode, refNode); //在指定的節(jié)點(diǎn)之前插入新節(jié)點(diǎn)
<code>
refNode是必傳的,如果不傳該參數(shù)會(huì)報(bào)錯(cuò);
如果refNode是undefined或null,則insertBefore會(huì)將節(jié)點(diǎn)添加到末尾;
</code>
這里需要注意的是childNodes/children兩個(gè)區(qū)別:
childNodes會(huì)把所有的節(jié)點(diǎn)(包括換行的空格)都算進(jìn)去,而children只考慮的只是
子元素。所以一般最好就用children【i】插入,不會(huì)考慮到換行空格等。