堀北真希うさぎ
主な作品
オリジナルキャラクタのイラスト例とアニメーション動画

ページ案内▼

appendChild()メソッド。

DOMに於いて、当該ノードの子ノードの配列を与えるchildNodesプロパティの解説です。

appendChild()メソッド・目次。

appendChild()メソッドとは。

appendChild()メソッドとは、指定したノードを子ノードとして追加するメソッドです。

appendChild()メソッドに依って追加されるノードは、末尾に追加されます。

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

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

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

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

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

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

  1. 追加したいノード

appendChild()メソッドの返し値は、追加された新子ノードです。

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

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

ある要素ノード e 内に於いて、href属性値が http:// で始まる全ての<a>要素の末尾に、<img>要素ノード im を追加する例です。

im=document.createElement('img');
im.setAttribute('src', '/image/icons/extenalSite.GIF');
im.setAttribute('alt', '(※外部サイト)');
im.setAttribute('width', '16');
im.setAttribute('heigth', '16');

var e1=e.getElementsByTagName('a');
var i=e1.length;
while (--i>=0) {
    if (e1[i].getAttribute('href').indexOf('http://')!=0) continue;
    e1[i].appendChild(im.cloneNode(true));
    }

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

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

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

関連事項

Nodeインタフェイス
ノードとして共通のメソッド/プロパティ
childNodesプロパティ
当該ノードの子ノードの配列
firstChildプロパティ
当該ノードの子ノードで一番初めにある子ノード
lastChildプロパティ
当該ノードの子ノードで一番最後にある子ノード
insertBefore()メソッド
指定された子ノードの直前に別のノードを挿入するメソッド
replaceChild()メソッド
指定された子ノードを別のノードに置換えるメソッド
removeChild()メソッド
指定された子ノードを除去するメソッド
hasChildNodes()メソッド
子ノードがあるかどうかを判定するメソッド
cloneNode()メソッド
当該ノードのコピーを生成するメソッド

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

marguerite.site@gmail.com