【jQuery】DOM要素の生成

DOM要素の生成

$("<a>")
$("<a></a>")
$("<img>")
$("<img />")
 
// しかし本家サイトでは、互換性の為、中身を取るタグについては、
// 終了タグを付けることを推奨している。
// 中身を取らないタグはどちらでも、OKとしている。
$("<a></a>")
$("<img>")
$("<img />")

第2引数にオブジェクトを指定すると、そのオブジェクトのプロパティは、HTMLの属性として設定される。
classは予約語のためダブルコートで囲む。

HTMLの属性も設定

$("<a></a>", {
  href: "abc.html",
  target: "_blank",
  "class": "myClass"
});

1.8からはjQueryメソッドを指定することができるらしい。これは便利！

1.8からはjQueryメソッドも設定できる

$("<div></div>", {
  width: 100,
  height: 100,
  css: {border: "5px solid gray"},
  addClass: "my-div",
  on: {
    click: function(event) {
      // イベント設定
    }
  }
});

参考：jQuery入門道場