Nullyのぶろぐ

仙台で働くエンジニアの日記

jQueryでinput要素をつくり込む

jQueryを使ってフォーム要素を創り上げていく」って言うのが必要になり、調べてみたら結構簡単に行けた!

忘れないようにメモメモ...

jQueryjQuery("CSS Selector"[, Context])のような形で「要素を抽出」出来ますが、こんな方法も。

jQuery("<input>", { attributes });

これで、input要素の属性(typeとかname属性など)をガシガシ付け足すことができるみたいです。

バージョンによって(1.3.2以前と1.4以降からが境っぽい...)書き方が異なるようなので注意!

参考URL:http://idocsq.net/page/224

これを利用すると、XMLなどからフォームを動的生成なんてこともできそう。

例えば

<hoge>

<field type="text" value="test" name="sample" label="hige?" />

</hoge>

のようなXMLなら

$.ajax({

url: "/path/to/xml.xml",

dataType: "xml",

type: "GET",

success: function(xml) {

var $field = $(xml).find("field");

$("<input>", {

"type": $field.attr("type"),

"value": $field.attr("value"),

"name": $field.attr("name"),

"id": "sample"

})

.after("<label />", {

"for": "sample",

text: $field.attr("label")

});

}

});

のような形で。

XMLの構成をちゃんと練らないと厳しいですが、これはこれで使えそうな感じが。

jQuery素敵です...。