JavaScript での要素の生成と追加

今回は、要素の生成と追加を行うためのメソッドについて記述しておきます。

2013年02月15日: 記述するのを忘れていたので replaceChild について追記しました。

要素を生成・追加するためのメソッド

要素の生成
.createElement('要素名')
要素の追加
.appendChild(追加する要素)
要素を指定要素の前に追加
.insertBefore(追加する要素,指定要素)
要素を既存の要素と置換
.replaceChild(追加する要素,置換対象要素)

要素を生成する / .createElement

要素の生成を行うためのメソッドです。

var element = document.createElement('p');

このメソッドで行える事は要素の生成だけなので、内容の設置や追加のためにもオブジェクトとしなければならず、変数に代入する必要があります。

要素を追加する / .appendChild

要素を、要素オブジェクトの最後尾に子要素として追加するためのメソッドです。

document.body.appendChild(element);

この例文では、オブジェクトである body 要素に、appendChild メソッド指定した変数(element)内の要素が、子要素として追加されることになります。

なお、変数(element)内が要素でない場合エラーを返します。

要素を指定要素の前に追加する / .insertBefore

要素を、要素オブジェクト内の指定した要素の前に追加するためのメソッドです。

document.body.insertBefore(element,document.getElementById('test'));

上記の例で行うと、body 内の test という ID属性を持つ要素の前に要素が追加されることになります。

.insertBefore メソッドの場合、オブジェクト直下の子要素とするわけではないので、間に別の要素があり子孫要素となる場合でも、指定要素の直前に要素を追加できます。

要素を既存の要素と置換 / .replaceChild

要素を、要素オブジェクト内の指定した要素と置き換えるためのメソッドです。

document.body.replaceChild(element,document.getElementById('test'));

この場合は ID="test" を持つ要素が、目的の要素と置き換えられることになります。

確認用サンプル

確認のために作成してみたサンプルです。(insert のチェックがある場合、replace は機能しないようにしてあります。)

要素名には p 要素なら、p だけという風に入力してみて下さい。





この文章を軸として要素が追加/置換されます。

確認してみて分かったことですが、createElement メソッドでの要素名は、記号を含むまたは先頭に数字を置いた文字列以外なら全角でも生成できます。

後書き

要素の追加は、その気になれば追加先とする要素オブジェクトの .innerHTML に、追加予定のHTMLコードを += 等の演算子を利用して、丸々書き加えることでも可能です。

しかしその方法で追加すると、すでに読み込まれていた要素内も再読み込みすることになり、他のスクリプトが埋め込まれていた場合はエラーの要因となることもあります。

アドセンスを含む要素の .innerHTML に、後から要素と内容を追加してみたら firebug で以下のエラーが出ました。

attempt to run compile-and-go script on a cleared scope

どうやら、変更前の対象にスクリプトを実行しようとしたらしいですが、.appendChild メソッドで追加する形にすると、エラーは出ません。

なお、元から空っぽの要素に追加する場合は、.innerHTML にそのまま追加で問題ありません。

なので、スクリプトを含むオブジェクトに要素を追加する場合は、まず要素を生成してから、その中に目的の記述を挿入し、オブジェクトにその要素を追加することで、追加された要素のみが読み込まれるようにしましょう。

スポンサードリンク

inserted by FC2 system