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

ParentNode.prepend() - 先頭に子ノードを挿入する

prepend()は、ParentNodeのメソッドです。先頭に子ノードを挿入します。

概要

名前
prepend
所属
ParentNode
IDL
[CEReactions, Unscopable] void prepend((Node or DOMString)... nodes);
仕様書
https://dom.spec.whatwg.org/#dom-parentnode-prepend

説明

引数(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.prepend( newElement ) ;

先頭に子ノードが挿入されます。

<ul id="hoge"><li>新しい要素</li>
	<li>要素1</li>
	<li>要素2</li>
</ul>

文字列を指定した場合、テキストノード(Text)に変換して挿入されます。下記はいずれも同じ結果となります。

element.prepend( new Text( "SYNCER" ) ) ;
element.prepend( "SYNCER" ) ;

可変引数なので、まとめてノードを挿入できます。引数の順番のままで、まとめて先頭に挿入されます。下記は同じ結果になります。

element.prepend( node3, node2, node1 ) ;

element.prepend( node1 ) ;
element.prepend( node2 ) ;
element.prepend( node3 ) ;

デモ

ParentNode.prepend()のデモです。コメントアウトを外して、複数の引数を指定するパターンも試してみて下さい。

<!-- このコードは編集できます。 -->

<!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.prepend( createLIElement() ) ;
// parentNode.prepend( 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日 (日)
コンテンツを公開しました。