English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
メソッド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に追加します注意:
ブラウザの互換性
すべてのブラウザがappendChild()メソッドを完全にサポートしています: | |||||
メソッド | appendChild() | appendChild() | appendChild() | appendChild() | appendChild() |
パラメータの値 | パラメータ |
---|---|
node | 説明 |
技術詳細 | 返される値: |
---|---|
返される値は追加された子要素です | DOMバージョン:1 |
更多示例
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()メソッド