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

Question

動的に生成されたdivに背景画像を追加しようとしています。

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

誰もが、私は背景画像を追加するために間違ってやっているか知っている：私は背景のCSSプロパティを追加すると、以下のように、それは私のプラグインを壊しますか？

Answer 1

この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 2

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

Answer 3

もちろん、文字列を使用して追加することはできますが、はるかに読みやすく洗練されているので、この方法をお勧めします。

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

demo

Answer 4

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

実際に属性を付ける必要がある場合は、