jquery - jqueryを使用して動的にdivを作成する

Question

動的に生成された div に背景画像を追加しようとしています。以下のように、背景に CSS プロパティを追加すると、プラグインが壊れます。

$("<div>", {
    'class': "iviewer_image_mask",
    css: "background: url('http://somesite.com/path/to/image.jpg');"
}).appendTo(this.container);

背景画像を追加するために私が間違っていることを知っている人はいますか?

Answer 1

もちろん、文字列のみを使用して追加することもできますが、私はこの方法を好みます。

$("<div>", {
    'class': "iviewer_image_mask",
    css: {
        "background": "url('http://somesite.com/path/to/image.jpg')"
    }
}).appendTo(this.container);

デモ

Answer 2

このSO questionで報告されたいくつかのベンチマークによると、jQuery を使用して HTML 要素を作成する最も効率的な方法は次のようになると思います。

$('<div class="iviewer_image_mask" style="background: url(http://somesite.com/path/to/image.jpg);"></div>').appendTo(this.container);

または、さらに読みやすくするために：

var elm = '<div class="iviewer_image_mask" ' +
          'style="background: url(http://somesite.com/path/to/image.jpg);">'+
          '</div>';
$(elm).appendTo(this.container);

Answer 3

$("<div>")
    .addClass('iviewer_image_mask')
    .css('background', "url('http://somesite.com/path/to/image.jpg')")
    .appendTo(this.container);

Answer 4

$("<div>").attr({
    'class': "iviewer_image_mask",
    'style': "background: url('http://somesite.com/path/to/image.jpg');"
}).appendTo("body");

本当に属性で追加する必要がある場合。