DOM APIを利用してHTML要素を作成する

DOM（ドキュメントオブジェクトモデル）APIを利用して JavaScriptから HTML要素を作成する。JavaScriptアプリケーションは、documentオブジェクトを通してDOM APIを利用することができる。

下記の画像をクリックすると、実際に動作する HTMLページが表示されるので試していただきたい。

鍵になるメソッドは　HTML要素を作成する createElementメソッドである。引数にタグの名前を指定してオブジェクトを作成する。オブジェクトのプロパティやメソッドを通して値や属性の設定などを行うことができる。最後に appendChilメソッドによりそれを所定の位置に挿入する。

ボタンをクリックすると入力値をアラートウィンドウに表示する。

ボタンのクリックによりリンク先に飛ぶ

ボタンをクリックするとオンになっているラジオボタンの valueプロパティをアラートウィンドウに表示する。ラジオボタンをグループ化するには、input要素の nameプロパティを同じにする。 getElementsByNameを使用すれば、グループ化したラジオボタン要素の配列を得ることができる。

ラジオボタンの実装方法については「ラジオボタンを作成する」も参照のこと

ボタンをクリックするとオンになっている全てのチェックボックスの valueプロパティをアラートウィンドウに表示する。実装方法は基本的にラジオボタンと同じである。

ボタンをクリックすると選択されている opution要素の valueプロパティをアラートウィンドウに表示する。select要素は opution要素の配列を保持する。select要素の multipleプロパティを trueにすると複数要素の選択が可能となる。

次の例は、p要素のテキストの色とフォントサイズを設定するものである。

setAttributeメソッドを使用する

classList.addメソッドを使用する。属性はひとつづつ設定する。

styleプロパティに直接属性を指定する。

styleプロパティの属性名はキャメルケースになる。

font-size → style.fontSize

テキストの属性を span要素の styleプロパティにより設定し innerHTMLに代入する。