堀北真希うさぎ
主な作品
制作者が作ったイラストと動画のサンプル

ページ案内▼

createElement()メソッド。

DOMに於いて、指定された要素名で新たな要素ノードを生成するcreateElement()メソッドの解説です。

createElement()メソッド・目次。

createElement()メソッドとは。

createElement()メソッドとは、指定された要素名で新規に要素ノードを生成するメソッドです。

生成された要素ノードは、通常の要素ノード同様Documnetインタフェイスを実装しており、従って通常の要素ノード同様内容や属性の追加が可能になります。

但し、生成されたノードは、メソッドの実行直後時点はメモリ上に生成されただけですので、appendChild()メソッドなどで文書に含まれているノードに追加しない限りは文書に反映される事はありません。

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

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

従って、文書ノードに対してのみcreateElement()メソッドを用いる事が出来ます。

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

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

  1. 要素名…XML文書の文書ノード上では大文字小文字を区別しますが、在来HTML文書の文書ノードでは大文字小文字が区別されません(在来HTMLでの要素は全て大文字化して取扱います)。

createElement()メソッドの返し値は、生成された要素ノードです。

要素名に不当な文字が含まれている場合には例外が発生します。

createElement()メソッドの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));
    }

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

createElement()メソッドで生成した要素ノードは、生成元と同じ文書に属するノードにのみ挿入出来ます。

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

関連事項

文書ノードとDocumentインタフェイス
文書ノードと文書ノードに実装されているDocumentインタフェイスについて
createTextNode()メソッド
テキストノードの新規生成
insertBefore()メソッド
指定された子ノードの直前に別のノードを挿入するメソッド
replaceChild()メソッド
指定された子ノードを別のノードに置換えるメソッド
removeChild()メソッド
指定された子ノードを除去するメソッド
appendChild()メソッド
指定されたノードを子ノードとして末尾に追加するメソッド

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

marguerite.site@gmail.com