element.insertBefore( newNode, referenceNode )は、「element」に指定した要素の子ノードリストのうち、引数「referenceNode」に指定した位置のノードの前に、引数「newNode」に指定したノードを追加するメソッド。
構文
var $insertedNode = $elementNodeReference.insertBefore( newNode, referenceNode );
引数
- newNode
- 挿入するノードを指定。
- referenceNode
- 挿入する位置。
- ここに指定したノードの前に挿入する。
戻り値
挿入したノード。引数「newNode」と同じ。
サンプル
- 項目Ａ
- 項目Ｂ
サンプルの動作について
「sample()」ボタンをクリックすると、ボタンの下のリストの先頭に「新項目1」を挿入する。
「sample()」ボタンをクリックする度に、「新項目2、新項目3、新項目4…」のように連番付きでリストの先頭に挿入する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
var $count = 1;
function sample() {
var $newElement = document.createElement( "LI" );
var $textNode = document.createTextNode( "新項目" + $count++ );
$newElement.appendChild( $textNode );
var $elementNodeReference = document.getElementById( "sample" );
$elementNodeReference.insertBefore( $newElement, $elementNodeReference.childNodes[0] );
}
</script>
var $count = 1;
function sample() {
var $newElement = document.createElement( "LI" );
var $textNode = document.createTextNode( "新項目" + $count++ );
$newElement.appendChild( $textNode );
var $elementNodeReference = document.getElementById( "sample" );
$elementNodeReference.insertBefore( $newElement, $elementNodeReference.childNodes[0] );
}
</script>
HTML
<p><button onclick="sample();">sample()</button></p>
<ol id="sample">
<li>項目Ａ</li>
<li>項目Ｂ</li>
</ol>
<ol id="sample">
<li>項目Ａ</li>
<li>項目Ｂ</li>
</ol>