新しい要素を作る

要素ノードを作る

要素はElementの訳語です。h1, h2, p などを指します。

すでにある要素にテキストを入れることができましたが、ここでは要素ノードを作るところからやってみます。

このように使います

document.createElement("要素名")

p要素をつくるならば

document.createElement("p")

この中にテキストを入れなければ役に立ちません。テキストを入れるために変数に代入して参照を作っておきます。これは getElementById() などで得られるものと同じものです。

var pelem = document.createElement("p")

テキストノードを作る

要素ノードの中にはテキストノードが存在してその中にテキスト(文字列)があります。次の様にして文字列からテキストノードを作ります。

document.createTextNode("文字列")

これも変数に代入して参照を作っておく方が便利です。たとえば、

var text = document.createTextNode("イシュアル プレーム フヌフンツァ")

テキストノードを要素ノードに加える

テキストだけでは表示できません。要素の中に加えます。

appendChild(テキストノード)

これまでに作った変数を利用してこの様に書けます。

pelem.appendChild(text)

もう一度全部書けば、

var pelem = document.createElement("p");
var text = document.createTextNode("イシュアル プレーム フヌフンツァ");
pelem.appendChild(text);

変数を使わなければ、

document.createElement("p").appendChild(document.createTextNode("イシュアル プレーム フヌフンツァ"));

要素ノードをドキュメントに加える

p要素とその中のテキストはできましたが、まだ表示されていません。どこに入れるかをまだ指定していないからです。

より詳しく言うと、表示されているドキュメントはノードのツリーとしてメモリ上にあるのですが、今作った要素はそのノードツリーの中に組み込まれていないからです。

場所の指定は getElementById() などを使います。

var target = document.getElementById("koko");

appendChild

既にある要素の後に加えるときはappendChildを使います。

使い方は、

親要素.appendChild(新要素)

次の例はid="koko"のdiv要素内に、既にあるp要素のテキスト"元からあるテキスト"のに、もう一つのp要素(内容は"イシュアル プレーム フヌフンツァ")を加えるものです。

var pelem = document.createElement("p");
var text = document.createTextNode("イシュアル プレーム フヌフンツァ");
pelem.appendChild(text);
var target = document.getElementById("koko");
target.appendChild(pelem);

実行

元からあるテキスト

<div id="koko">
<p>元からあるテキスト</p>
</div>

後ろに加わっていくことを確かめるためにクリックする度に時刻を書くように変更してみます。

var pelem = document.createElement("p");
var text = document.createTextNode(new Date());
pelem.appendChild(text);
var target = document.getElementById("koko1");
target.appendChild(pelem);

実行

元からあるテキスト(1) 下が最新の時刻です

insertBefore

既にある要素の前に加えたい場合はinsertBefore()を使います。

使い方は、

親要素.insertBrfore(新要素,元要素)

元要素を指定できるとき

ターゲットになる要素にidなどがついていれば次の様にします。

次の例はid="koko2"のp要素(内容は"元からあるテキスト")のに、もう一つのp要素(内容は"イシュアル プレーム フヌフンツァ")を加えるものです。

var pelem = document.createElement("p");
var text = document.createTextNode("イシュアル プレーム フヌフンツァ");
pelem.appendChild(text);
var target = document.getElementById("koko2");
target.parentNode.insertBefore(pelem,target);

実行

元からあるテキスト(2)

<div>
<p id="koko2">元からあるテキスト(2)</p>
</div>

クリックする度に時刻を書くように変更してみます。

var pelem = document.createElement("p");
var text = document.createTextNode(new Date());
pelem.appendChild(text);
var target = document.getElementById("koko3");
target.parentNode.insertBefore(pelem,target);

実行

元からあるテキスト(3)上が最新の時刻です

<div>
<p id="koko3">元からあるテキスト(3)上が最新の時刻です</p>
</div>

親要素から指定するとき

親要素のほうにだけidがついている場合、たとえばid="koko4"の中のp要素(内容は"元からあるテキスト")のに、もう一つのp要素(内容は"イシュアル プレーム フヌフンツァ")を加えるのなら、次の様にします。

var pelem = document.createElement("p");
var text = document.createTextNode("イシュアル プレーム フヌフンツァ");
pelem.appendChild(text);
var parentElem = document.getElementById("koko4");
var targets = parentElem.getElementsByTagName("p");
parentElem.insertBefore(pelem,targets[0]);

実行

元からあるテキスト(4)

<div id="koko4">
<p>元からあるテキスト(4)</p>
</div>

これも前に加わっていることを確認してみます。

var pelem = document.createElement("p");
var text = document.createTextNode(new Date());
pelem.appendChild(text);
var parentElem = document.getElementById("koko5");
var target = parentElem.getElementsByTagName("p");
parentElem.insertBefore(pelem,target[0]);

実行

元からあるテキスト(5) 上が最新の時刻です

<div>
<p id="koko5">元からあるテキスト(5)上が最新の時刻です</p>
</div>

ウェブページ(Feb.2011)
聖愛中学高等学校
http://www.seiai.ed.jp/
Dec.2009 初稿