Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- JavaScript辞典
- 親HTML要素.appendChild()
親HTML要素.appendChild()対応: DOM Level 1（1998）
指定したHTML要素を親要素の最後の子要素として追加します。主に『document.createElement()』で作成したHTML要素をDOMに挿入する際に使用します。
構文
親要素.appendChild(追加する要素);
引数
| 引数 | 概要 |
|---|---|
| 追加する要素 | 親要素の末尾に追加したいHTML要素（Elementオブジェクト）を指定します。 |
戻り値
追加されたHTML要素（引数で渡したHTML要素そのもの）を返します。
サンプルコード
<ul id="list"> <li>項目1</li> <li>項目2</li> </ul>
var list = document.querySelector("#list");
// 新しいHTML要素を作成して追加します。
var newItem = document.createElement("li");
newItem.textContent = "項目3";
list.appendChild(newItem);
// 結果: 項目1, 項目2, 項目3
// 複数のHTML要素を連続して追加します。
var fruits = ["りんご", "みかん", "ぶどう"];
fruits.forEach(function(name) {
var li = document.createElement("li");
li.textContent = name;
list.appendChild(li);
});
実行結果
上記のコードを実行すると、HTMLは以下のように変化します。
<!-- 実行前 --> <ul id="list"> <li>項目1</li> <li>項目2</li> </ul>
<!-- 実行後 --> <ul id="list"> <li>項目1</li> <li>項目2</li> <li>項目3</li> <li>りんご</li> <li>みかん</li> <li>ぶどう</li> </ul>
新しいHTML要素は常に末尾に追加されます。既存の『項目1』『項目2』はそのまま残っています。
概要
『親HTML要素.appendChild()』はHTML要素をDOMに追加するための基本的なメソッドです。追加先のHTML要素の末尾（最後の子要素の後）に挿入されます。
注意点として、すでにDOMに存在するHTML要素を別の場所に『親HTML要素.appendChild()』すると、元の位置から削除されて新しい位置に移動します。コピーではなく移動になるため、同じHTML要素を複数の場所に配置したい場合は『cloneNode(true)』でHTML要素を複製してから追加してください。
末尾ではなく特定の位置に挿入したい場合は『insertBefore()』を使用してください。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
シェアする