HTML DOM Element appendChild() メソッド
- 前のページ addEventListener()
- 次のページ 属性
- 上一階層に戻る HTML DOM Elements オブジェクト
定義と使用法
appendChild() メソッドはノード（要素）を最後の子要素として要素に追加します。
も参照してください：
関連するドキュメントメソッド：
インスタンス
例 1
リストにアイテムを追加する：
const node = document.createElement("li");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
追加前：
- コーヒー
- ティー
追加後：
- コーヒー
- ティー
- 水
例 2
リストからリストにアイテムを移動する：
const node = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(node);
移動前：
- コーヒー
- ティー
- 水
- ミルク
移動後：
- コーヒー
- ティー
- ミルク
- 水
例 3
テキストを持つパラグラフを作成する：
- パラグラフ要素を作成する
- テキストノードを作成する
- パラグラフにテキストノードを追加する
- ドキュメントにパラグラフを追加する
<div> 要素に <p> 要素を作成して追加する：
const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);
例 4
ドキュメントの本文に <p> 要素を作成して追加する：
const para = document.createElement("P");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.body.appendChild(para);
構文
element.appendChild(node)
または
node.appendChild(node)
パラメータ
| パラメータ | 説明 |
|---|---|
| node | 必要です。追加するノード。 |
返り値
| タイプ | 説明 |
|---|---|
| ノード | 追加されたノード。 |
ブラウザのサポート
element.appendChild() DOMレベル1 (1998) の機能です。
すべてのブラウザが完全にサポートしています：
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| サポート | 9-11 | サポート | サポート | サポート | サポート |
- 前のページ addEventListener()
- 次のページ 属性
- 上一階層に戻る HTML DOM Elements オブジェクト
