element.insertBefore( newNode, referenceNode )メソッド

element.insertBefore( newNode, referenceNode )は、「element」に指定した要素の子ノードリストのうち、引数「referenceNode」に指定した位置のノードの前に、引数「newNode」に指定したノードを追加するメソッド。

構文

var $insertedNode = $elementNodeReference.insertBefore( newNode, referenceNode );

引数

newNode
挿入するノードを指定。
referenceNode
挿入する位置。
ここに指定したノードの前に挿入する。

戻り値

挿入したノード。引数「newNode」と同じ。

サンプル

  1. 項目A
  2. 項目B

サンプルの動作について

「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>

HTML

<p><button onclick="sample();">sample()</button></p>
<ol id="sample">
    <li>項目A</li>
    <li>項目B</li>
</ol>

スポンサード リンク

カテゴリー: DOM, Elementオブジェクト, JavaScript, ノード, メソッド, リファレンス, 逆引き パーマリンク