js之原生節(jié)點(diǎn)操作

鏈接地址: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ì)考慮到換行空格等。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容