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)と書かなければならないのです。
