Hatena::ブログ(Diary)

ヒルズで働く@robarioの技ログ このページをアンテナに追加 RSSフィード

2012年07月02日

[JavaScript]jQuery(html, props)でinput要素を生成する場合の正しい書き方

jQueryではDOM生成にjQuery(html, props)という構文が使えます。↓のように簡潔に書けます。

-$('<div class="bar">foo</div>');+$('<div/>', {'class': 'bar', 'text': foo'});


ただしinput要素に限っては問題があるので注意しないといけません。

これは昔ハマったことがある(ブログ記事も書いた)のですが、input要素のtype属性は上書きできません。type="password"がtype="text"に変更されないようにしているのだと思います。

そのため、http://api.jquery.com/jQuery/#creating-new-elements title:Creating New ElementsのUnsupported IE]の項目では

-$('<input />', {type: 'text', name: 'test'}).appendTo("body");
+$('<input type="text" />').attr({name: 'test'}).appendTo("body");

と指導されています。私はこの部分を若干適当に読み流していて、

'<input type="text" />'

とさえ書けば良いのだと思っていました。そこで、冒頭で紹介したjQuery(html, props)を使って

$('<input type="text"/>',{name: 'test'}).appendTo("body");

と書いてしまいました。

すると

> "オブジェクトは 'createDocumentFragment' プロパティまたはメソッドをサポートしていません。"

とのお言葉を頂き、またもやinput周りでハマることになったのです。

jQueryでの新規input要素を正しく書くには

jQuery('<input/>')

ではなく

jQuery('<input type="text"/>', props)

でもなく

jQuery('<input type="text"/>').attr(props)

と書かなければならないのです。

トラックバック - http://d.hatena.ne.jp/holidays-l/20120702/p1