公開日

jQueryでHTMLタグ要素をcreateElement使わずに生成する

やりたいこと

とある<form>があってその中にjQueryで動的にinput hiddenタグ要素を生成&追加して送信したい。

方法

要素を生成しようと思ったときにぱっと思いつくのは、document.createElementだが、jQueryを使うと下記のように簡潔にかける。

<form id="targetId">
  ...
</form>
$('<input>').attr({
  type: 'hidden',
  id: 'input_id',
  value: 12345
}).appendTo('#targetId');

また下記のようにattrを使わずに書くことができる(コメントで教えていただきました taku hhara さん、ありがとうございます)。

$("<input>", {
  type: 'hidden',
  id: 'input_id',
  value: 12345
}).appendTo('#targetId');

テキストの入ったdivを生成

上述のテクニックを使った下記のようなテキストの入ったdiv要素も生成できます。

$('<div>', { id:'hoge', class:'fuga', text:'piyo' });

このコードは下記コードと同じ結果を得られます。

$('<div id="hoge"><span class="fuga">piyo</span></div>');

(コードはjQueryの$()が多機能すぎる件について。5種類も仕事があるよ。より引用)

参考