formタグをappendしたが、submitが効かない【jQuery】【HTML】

【問題】

$("#hoge").append("<form action=\"huga\" method=\"POST\">");

$("#hoge").append("<input type=\"text\" name=\"hugahuga\"/>");

$("#hoge").append("<input type=\"submit\" name=\"gehu\" value=\"GO\">");

$("#hoge").append("</form>");

として生成したフォームのsubmitボタンが効かない。

【原因】

結果として生成されたHTMLは以下の通りになっていた。

<div id="hoge">

<form action="huga" method="POST"></form>

<input type="text" name="hugahuga"/>

<input type="submit" name="gehu" value="GO">

</div>

となり、submitがフォームの中に入っていない。

おそらくappendとかjQueryのタグ自動生成の仕様なんだと思う。

【解決】

jsファイルを、

var str = "<form action=\"huga\" method=\"POST\">";

str += "<input type=\"text\" name=\"hugahuga\"/>";

str += "<input type=\"submit\" name=\"gehu\" value=\"GO\">";

str += "</form>";

$("#hoge").append( str );

とした。

【雑記】

forループ内にフォーム内要素などをつくらなければならないときに陥る問題。

ベンチ的にもappendやprependなどのHTML操作は遅くなるらしい。

極力、文字列に溜めていって、HTML操作は一回に済ませたい。