如何添加子節(jié)點(diǎn)
代碼
<!DOCTYPE html>
<html>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">請(qǐng)點(diǎn)擊按鈕向列表中添加項(xiàng)目畔派。</p>
<button onclick="myFunction()">親自試一試</button>
<script>
function myFunction()
{
var node=document.createElement("LI");
var
//創(chuàng)建新節(jié)點(diǎn)并儲(chǔ)存在變量node中痪蝇。
textnode=document.createTextNode("Water");
//創(chuàng)建文本節(jié)點(diǎn)并儲(chǔ)存在變量textnode中租幕。
node.appendChild(textnode);
//node代表母節(jié)點(diǎn)忱叭,textnode代表希望添加的節(jié)點(diǎn)睦霎。
document.getElementById("myList").appendChild(node);
}
</script>
<p><b>注釋:</b>首先創(chuàng)建 LI 節(jié)點(diǎn)导绷,然后創(chuàng)建文本節(jié)點(diǎn)移稳,然后把這個(gè)文本節(jié)點(diǎn)追加到 LI 節(jié)點(diǎn)蕴纳。最后把 LI 節(jié)點(diǎn)添加到列表中。</p>
</body>
</html>
分析
首先createElement創(chuàng)建了一個(gè)元素標(biāo)簽个粱。
之后為這個(gè)元素創(chuàng)建了文本內(nèi)容古毛。(文本節(jié)點(diǎn))
最后appendChild() 方法向節(jié)點(diǎn)添加最后一個(gè)子節(jié)點(diǎn)。
也就是把文本內(nèi)容添加到元素的標(biāo)簽中都许。
這三句的結(jié)果就是做了這么一件事稻薇,用html語(yǔ)言級(jí)數(shù)
<li>Water</li>
接下來還有一件事,就是這句插入到哪里胶征?
document.getElementById("myList").appendChild(node);
這句表明插入的Mylist的最后一行里塞椎。