HTML DOM appendChild() 方法

appendChild()方法的作用是：在指定父節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾添加一個(gè)節(jié)點(diǎn)。

如果給定的子節(jié)點(diǎn)是文檔中現(xiàn)有節(jié)點(diǎn)的引用，appendChild()將它從當(dāng)前位置移動(dòng)到新位置(參見下面的“更多示例”)。

使用insertBefore()方法可在指定的現(xiàn)有子節(jié)點(diǎn)之前插入新的子節(jié)點(diǎn)。

語法：node.appendChild(node)

示例var?newElem?=?document.createElement("h3");???//?創(chuàng)建一個(gè)新的h3元素

var?newContent?=?document.createTextNode("嗨，你好!");?//?創(chuàng)建一些文本內(nèi)容

newElem.appendChild(newContent);?//??將文本節(jié)點(diǎn)添加到新創(chuàng)建的h3

document.body.appendChild(newElem);??//??將新創(chuàng)建的元素及其內(nèi)容添加到DOM中測試看看?/?

注意：如果要?jiǎng)?chuàng)建帶有文本的新元素，請記住將文本創(chuàng)建為Text節(jié)點(diǎn)，然后將其附加到元素，然后將該元素附加到文檔。

瀏覽器兼容性

所有瀏覽器完全支持appendChild()方法：Method

appendChild()是是是是是

參數(shù)值參數(shù)描述

node要附加到給定父節(jié)點(diǎn)的節(jié)點(diǎn)(通常是元素)

技術(shù)細(xì)節(jié)返回值：返回的值是附加的子元素

DOM版本：DOM級別1

更多示例

創(chuàng)建一個(gè)

元素并將其附加到一個(gè)

元素：

示例var?para?=?document.createElement("p");???//?Create?a?

?node

var?txt?=?document.createTextNode("This?is?a?paragraph.");//?Create?a?text?node

para.appendChild(txt);//?Append?the?text?to?

document.getElementById("demo").appendChild(para);//?Append?

?to?

測試看看?/?

創(chuàng)建一個(gè)

元素并將其附加到文檔主體的末尾：

示例var?para?=?document.createElement("p");???//?Create?a?

?node

var?txt?=?document.createTextNode("This?is?a?paragraph.");//?Create?a?text?node

para.appendChild(txt);//?Append?the?text?to?

document.body.appendChild(para);//?Append?

?to?body測試看看?/?

此示例將元素從其當(dāng)前位置移動(dòng)到新位置：

示例var?elem?=?document.getElementById("myList2").lastElementChild;

document.getElementById("myList1").appendChild(elem);測試看看?/?

相關(guān)參考

總結(jié)

以上是生活随笔為你收集整理的html添加子节点方法,HTML DOM appendChild() 方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。