最新的Web開發教程
 

HTML DOM appendChild() Method

<元素對象

例

在列表中追加項目：

var node = document.createElement("LI");                 // Create a <li> node
var textnode = document.createTextNode("Water");         // Create a text node
node.appendChild(textnode);                              // Append the text to <li>
document.getElementById("myList").appendChild(node);     // Append <li> to <ul> with id="myList"

追加之前：

  • Coffee
  • Tea

追加後：

  • Coffee
  • Tea
  • Water
試一試»

更多"Try it Yourself"下面的例子。

定義和用法

在appendChild()方法添加一個節點作為節點的最後一個孩子。

提示：如果你想創建一個新的段落，文字，記得創建文本作為你追加到第一個文本節點， 然後附加段落到文檔中。

您也可以使用此方法將元素從一個元素移動到另一個(See "More Examples")

提示：使用insertBefore()方法的規定，現有的子節點之前插入一個新的子節點。

瀏覽器支持

在表中的數字規定，完全支持方法的第一個瀏覽器版本。

方法
appendChild() 是 是 是 是 是

句法

node .appendChild( node )

參數值

參數 類型 描述
node Node object 需要。 要追加的節點對象

技術細節

返回值： 一個節點對象，代表所附節點
DOM版本 核心1級節點對象
例子

更多示例

例

移動列表項從一個列表到另一個：

var node = document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);

追加之前：

  • Coffee
  • Tea
  • Water
  • Milk

追加後：

  • Coffee
  • Tea
  • Milk
  • Water
試一試»

例

創建<p>元素，並將其附加到<div>元素：

var para = document.createElement("P");                       // Create a <p> node
var t = document.createTextNode("This is a paragraph.");      // Create a text node
para.appendChild(t);                                          // Append the text to <p>
document.getElementById("myDIV").appendChild(para);           // Append <p> to <div> with id="myDIV"
試一試»

例

創建<p>一些文本元素，並將它附加到文檔主體的端部：

var x = document.createElement("P");                        // Create a <p> node
var t = document.createTextNode("This is a paragraph.");    // Create a text node
x.appendChild(t);                                           // Append the text to <p>
document.body.appendChild(x);                               // Append <p> to <body>
試一試»

相關頁面

HTML DOM參考： href="met_node_haschildnodes.html"> element . hasChildNodes() Method href="met_node_haschildnodes.html"> element . hasChildNodes() Method

HTML DOM參考： href="met_node_insertbefore.html"> element . insertBefore() Method href="met_node_insertbefore.html"> element . insertBefore() Method

HTML DOM參考： href="met_node_removechild.html"> element . removeChild() Method href="met_node_removechild.html"> element . removeChild() Method

HTML DOM參考： href="met_node_replacechild.html"> element . replaceChild() Method href="met_node_replacechild.html"> element . replaceChild() Method

HTML DOM參考： href="met_document_createelement.html">document. createElement() Method href="met_document_createelement.html">document. createElement() Method

HTML DOM參考： href="met_document_createtextnode.html">document. createTextNode() Method href="met_document_createtextnode.html">document. createTextNode() Method

HTML DOM參考： href="met_document_adoptnode.html">document. adoptNode() Method href="met_document_adoptnode.html">document. adoptNode() Method

HTML DOM參考： href="met_document_importnode.html">document. importNode() Method href="met_document_importnode.html">document. importNode() Method

<元素對象