JavaScript:要素を動的に追加する。

JavaScriptを用いてinput要素を動的に追加する方法です。

 

この方法は例えばデータベースから持ってきた情報をinputのvalueとして

設定してあげたい場合、かつデータベースから引っ張ってきた情報をJavaScriptなどで

フィルターをかけてあげる場合などに使えます。

 

またそのほかにもいろいろと使える場面があるので知っておくと便利です。

 

早速解説していきます。

 

1) 要素を追加したいオブジェクト(親オブジェクト)への参照を取得。

 

こちらではまずinput要素を追加する親を取得します。取得方法には2つあり
 1:ID名で取得
  親オブジェクト = document.getElementByID(“ID名”);

のように親要素にIdを設定し、取得する方法と


 2:タグ名(TABLEとかTDとか)で取得。idNumは0から始まる順番です。
  document.getElementsByTagName(“タグ名”).item(idNum);

の2つの方法があります。

 

お勧めは1番目です、なんといっても簡単なので。



2) 追加したい要素を生成。
 オブジェクト名 = document.createElement(“タグ名”);

こちらで任意のタグを生成します。


3)生成した要素の属性をセット
 オブジェクト名.setAtrribute(“属性”,”値”);

こちらでタグの情報を設定します。

 

たとえばValueにNum1という情報を設定したい時は、

オブジェクト名.setAtrribute(“Value”,”Num1″);

のようにします。また他の方法として、

 

オブジェクト名.value=Num1;

でも設定できます。

 


4)生成した要素を親へ追加
 親オブジェクト.appendChild(オブジェクト名);

最後にに1で取得した親に含めてあげます。

オブジェクト名には当たり前ですが2で作成したものを指定します。

 

以上の操作でJavaScriptで動的に要素を追加してあげることができます。

この方法を使えば複数個また何かしらの規則性があるものを複数追加

する場合にとても重宝するので、ぜひ活用していきたいですね。

 

以上、JavaScriptを用いてinput要素を動的に追加する方法でした。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です