SYNCERのロゴ
アイキャッチ画像

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>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
54+ 49+ 10+×× 41+ 10.0+×
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月8日 (日)
コンテンツを公開しました。