堀北真希うさぎ
主な作品
堀北真希うさぎ：平成元年〜平成 3年頃のボシュロムのTVCM風にソフトコンタクトレンズを着けている場面と仮想CM動画

ページ案内▼

insertBefore()メソッド。

DOMに於いて、指定した子ノードの直前へ別のノードを挿入するinsertBefore()メソッドの解説です。

insertBefore()メソッド・目次。

insertBefore()メソッドとは。

insertBefore()メソッドとは、指定した子ノードの直前へ別のノードを挿入するメソッドです。

挿入したいノードが既に当該文書に含まれたノードである場合は、一旦それを除去した上で挿入します。

insertBefore()メソッドを実装するインタフェイス。

insertBefore()メソッドはNodeインタフェイスに依って実装されます。

従って、DOMで扱える全てのノードでinsertBefore()メソッドを得る事が出来ます。

insertBefore()メソッドの引数と返し値。

insertBefore()メソッドは以下の二つの引数を取ります。

  1. 新たに挿入したいノード
  2. 挿入する位置として指定する子ノード

第一引数で指定されたノードは、第二引数で指定された子ノードの直前に兄弟ノードとして挿入されます。

insertBefore()メソッドの返し値は実際に挿入したノードです。

尚、第二引数で指定された子ノードが存在しない場合など、正常に処理が出来ない場合には例外が発生します。

insertBefore()メソッドのJAVAスクリプトでの使用例。

IDとして HERE を与えられた要素の直前に、新規で作成した<img>要素ノード e を挿入する例です。

var e=document.createElement('img');
e.setAttribute('src', 'http://www.uso800.uso/images/HORIKITA_Maki.JPG');
e.setAttribute('alt', '堀北真希ちゃん');
e.setAttribute('width', '240');
e.setAttribute('height', '320');

d=document.getElementById('HERE');
if (d) {
    var dp=d.parentNode;
    dp.insertBefore(e, d);
    }

insertBefore()メソッドに於ける注意事項。

insertBefore()メソッドで挿入出来るノードは、挿入先と同じ文書に属するノードに限られます。

特に、Ajaxで外部から別の文書を取り込んだ場合、responseXML プロパティで得られるオブジェクトは元のHTML文書とは異なる文書となるため、単純に取得してきたXML文書の要素を元のHTML文書に附加する事やその逆の行為は出来ないと言う事になります。

関連事項

Nodeインタフェイス
ノードとして共通のメソッド/プロパティ
replaceChild()メソッド
指定された子ノードを別のノードに置換えるメソッド
removeChild()メソッド
指定された子ノードを除去するメソッド
appendChild()メソッド
指定されたノードを子ノードとして末尾に追加するメソッド
hasChildNodes()メソッド
子ノードがあるかどうかを判定するメソッド
cloneNode()メソッド
当該ノードのコピーを生成するメソッド

しらぎくのウェブサイト作成入門サイトマップ

marguerite.site@gmail.com