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>

»それを自分で試してみてください

JavaScript 参照

JavaScript

ブラウザ BOM

HTML DOM

HTML オブジェクト

その他のオブジェクト

HTML DOM appendChild() Method

例

定義と使用法

ブラウザのサポート

構文

パラメータ値

技術的な詳細

その他の例

例

例

例

関連ページ