Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【jQuery】DOM要素の生成

More than 5 years have passed since last update.
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入門道場

kazu56
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away