HTML DOM appendChild() 方法

appendChild()方法的作用是：在指定父節點的子節點列表的末尾添加一個節點。

如果給定的子節點是文檔中現有節點的引用，appendChild()將它從當前位置移動到新位置(參見下面的“更多示例”)。

使用insertBefore()方法可在指定的現有子節點之前插入新的子節點。

語法：node.appendChild(node)

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

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

newElem.appendChild(newContent);?//??將文本節點添加到新創建的h3

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

注意：如果要創建帶有文本的新元素，請記住將文本創建為Text節點，然后將其附加到元素，然后將該元素附加到文檔。

瀏覽器兼容性

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

appendChild()是是是是是

參數值參數描述

node要附加到給定父節點的節點(通常是元素)

技術細節返回值：返回的值是附加的子元素

DOM版本：DOM級別1

更多示例

創建一個

元素并將其附加到一個

元素：

示例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?

測試看看?/?

創建一個

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

示例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測試看看?/?

此示例將元素從其當前位置移動到新位置：

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

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

相關參考

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。