ParentNode.append() - 末尾に子ノードを挿入する
append()は、ParentNodeのメソッドです。末尾に子ノードを挿入します。
概要
- 名前
- append
- 所属
- ParentNode
- IDL
[CEReactions, Unscopable] void append((Node or DOMString)... nodes);
- 仕様書
- https://dom.spec.whatwg.org/#dom-parentnode-append
説明
引数(nodes)には、挿入したいノード、または文字列を指定します。文字列を指定した場合はテキストノード(Text)として解釈されます。可変引数で、任意の数だけ指定できます。複数指定した場合は、全ての引数をまとめて先頭に追加します。
チュートリアル
末尾の子ノードとして、ノードを挿入します。
<ul id="hoge">
<li>要素1</li>
<li>要素2</li>
</ul>
var element = document.getElementById( "hoge" ) ;
var newElement = document.createElement( "li" ) ;
newElement.textContent = "新しい要素" ;
element.append( newElement ) ;
末尾に子ノードが挿入されます。
<ul id="hoge">
<li>要素1</li>
<li>要素2</li>
<li>新しい要素</li></ul>
文字列を指定した場合、テキストノード(Text)に変換して挿入されます。下記はいずれも同じ結果となります。
element.append( new Text( "SYNCER" ) ) ;
element.append( "SYNCER" ) ;
可変引数なので、まとめてノードを挿入できます。引数の順番のままで、まとめて末尾に挿入されます。下記は同じ結果になります。
element.append( node1, node2, node3 ) ;
element.append( node1 ) ;
element.append( node2 ) ;
element.append( node3 ) ;
デモ
ParentNode.append()のデモです。コメントアウトを外して、複数の引数を指定するパターンも試してみて下さい。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<button id="run">実行</button>
<hr>
<ul id="hoge">
<li>SYNCER1</li>
<li>SYNCER2</li>
<li>SYNCER3</li>
</ul>
<hr>
<div id="result"></div>
<script>
document.getElementById( "run" ).onclick = function () {
var parentNode = document.getElementById( "hoge" ) ;
parentNode.append( createLIElement() ) ;
// parentNode.append( createLIElement(), createLIElement(), createLIElement() ) ;
}
var number = 0 ;
function createLIElement () {
var li = document.createElement( "li" ) ;
li.textContent = "要素" + ++number ;
return li ;
}
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● 54+ | ● 49+ | ● 10+ | × | × | ● 41+ | ● 10.0+ | × |
関連記事
- ParentNode.prepend()
- prepend()は、ParentNodeのメソッドです。先頭に子ノードを挿入します。
- ParentNode.querySelectorAll()
- querySelectorAll()は、ParentNodeのメソッドです。セレクタに一致する全ての要素を取得します。
- ParentNode.querySelector()
- querySelector()は、ParentNodeのメソッドです。セレクタに一致する最初の要素を取得します。
- ParentNode.lastElementChild
- lastElementChildは、ParentNodeのプロパティです。最後の子要素を返します。