dom要素のいつもと違った作成方法

with コメントはまだありません

今までは、

$(“<div class=’bbb’>hogehoge</div>”).css({background:”#ddd”, padding:”10px”}).prependTo(“body”);

こういう書式で要素を生成していましたが、
下記のような書き方もできるようです。

$(“<div>”, {class: “test”, text: “hogehoge”, css:{background:”#ddd”, padding:”10px”}}).prependTo(“body”);

いまいちまだ使い分けの意図を理解できてないのですが、
個人的に後者の方が、わかりやすいかなと思いました。

{}の中にすべて設定したいプロパティや値を集約できるので、
すっきりできていいかなと。

まだ試してないですが、jqueryさんのことだからきっと、
ここの中に関数とかも入れれちゃうんじゃないかと思っています。
調べたいんですがいかんせんどう調べてよいものか・・・

今度試してみます。

 

※追記

やっぱできました。

var test = $(“<div>”, {
class: “test”,
text: “hogehoge”,
css:{
background:”#ddd”,
padding:”10px”
},
click: function() {
//処理
}
}

んな感じで、メソッド名:でセレクタにセットできるようです。
もちろん複数可能です。
前は一個一個いちいち設定してたので、
一気にまとめて設定できるのは楽でいいですね。

Leave a Reply