English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JS DOMリファレンスマニュアル

HTML DOM要素オブジェクト

メソッドHTML DOM appendChild() メソッド

メソッドの作用は、指定された親ノードの子ノードリストの末尾にノードを追加することです。

指定された子ノードがドキュメント内の既存ノードの参照である場合、appendChild()はそれを現在の場所から新しい位置に移動します(下記の「更多示例」を参照してください)。使用insertBefore()

指定された既存子ノードの前に新しい子ノードを挿入する方法です。

文法:
node.appendChild(node)3var newElem = document.createElement("h   // ");3新しいhを作成します
要素 // var newContent = document.createTextNode("嗨,你好!"); 
いくつかのテキスト内容を作成します //  newElem.appendChild(newContent);3 
新しいテキストノードを新しいhに追加します  //  document.body.appendChild(newElem);
テストを見て‹/›

新しい要素とその内容をDOMに追加します注意:

新しい要素とその内容をDOMに追加する場合は、テキストをTextノードとして作成し、それを要素に追加してから、その要素をドキュメントに追加することを忘れないでください。

ブラウザの互換性

すべてのブラウザがappendChild()メソッドを完全にサポートしています:
メソッドappendChild()appendChild()appendChild()appendChild()appendChild()

パラメータの値パラメータ
node説明

指定された親ノード(通常は要素)に追加するノード()

技術詳細返される値:
返される値は追加された子要素ですDOMバージョン:1

DOMレベル

更多示例

var para = document.createElement("p");   // 新しい<p>ノードを作成します。
var txt = document.createTextNode("This is a paragraph.");// テキストノードを作成します。
para.appendChild(txt);// テキストを<p>に追加します。
新しい<p>要素を作成し、<div>要素に追加します:// <p>を<div>に追加します。
テストを見て‹/›

新しい<p>要素を作成し、ドキュメントの末尾に追加します:

var para = document.createElement("p");   // 新しい<p>ノードを作成します。
var txt = document.createTextNode("This is a paragraph.");// テキストノードを作成します。
para.appendChild(txt);// テキストを<p>に追加します。
document.body.appendChild(para);// Append <p> to body
テストを見て‹/›

この例では、要素を現在の位置から新しい位置に移動します:

var elem = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1).appendChild(elem);
テストを見て‹/›

関連参照

HTML DOM参照:node.hasChildNodes()メソッド

HTML DOM参照:node.insertBefore()メソッド

HTML DOM参照:node.removeChild()メソッド

HTML DOM参照:node.replaceChild()メソッド

HTML DOM参照:document.createElement()メソッド

HTML DOM参照:document.createTextNode()メソッド

HTML DOM参照:document.adoptNode()メソッド

HTML DOM参照:document.importNode()メソッド

HTML DOM要素オブジェクト