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

ChildNode.before() - ノードの直前に挿入する

before()は、ChildNodeのメソッドです。元のNodeの直前に、引数に指定したNodeを挿入します。

概要

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

説明

引数(nodes)には、挿入するNodeを指定します。可変で任意の数だけ指定できます。返り値はありません。

チュートリアル

直前に要素を挿入する例です。

<ul>
	<li id="hoge">元の要素</li>
</ul>
var element = document.getElementById( "hoge" ) ;

var newElement = document.createElement( "li" ) ;
newElement.textContent = "新しい要素" ;

element.before( newElement ) ;
<ul>
	<li>新しい要素</li><li id="hoge">元の要素</li>
</ul>

複数の引数を指定できます。下記は同じ結果になります。

// 複数指定の場合
element.before( newElement1, newElement2, newElement3 ) ;

// 単独指定の場合
element.before( newElement1 ) ;
element.before( newElement2 ) ;
element.before( newElement3 ) ;

デモ

「追加」をクリックするとメソッドを実行し、ul要素の最初のli要素の直前に、新しいli要素を挿入します。コメントアウトを外して、複数の引数を指定するパターンも試してみて下さい。

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

<!DOCTYPE html>
<html>
<body>
	<p><button id="run">追加</button></p>
	<ul><li id="hoge">最初のli要素</li></ul>
<script>
var element1 = document.getElementById( "run" ) ;
var element2 = document.getElementById( "hoge" ) ;
var number = 0 ;

element1.onclick = function () {
	element2.before( createLIElement() ) ;
//	element2.before( createLIElement(), createLIElement(), createLIElement() ) ;
}

var createLIElement = function () {
	var newElement = document.createElement( "li" ) ;
	newElement.textContent = ++number + "個目" ;
	return newElement ;
}
</script>
</body>
</html>

サポート状況

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