utilizzando jquery per creare dinamicamente div

Question

Sto tentando di aggiungere un'immagine di sfondo a un div generato dinamicamente. Quando aggiungo la proprietà CSS per lo sfondo, come qui di seguito, mi si spezza il plugin:

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

Qualcuno sa che cosa sto facendo male per aggiungere l'immagine di sfondo?

Answer 1

Secondo alcune analisi comparativa riportata in questo SO question, credo che il modo più efficace per creare il vostro elemento HTML usando jQuery sarebbe questo:

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

O per alcuni extra leggibilità:

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

Naturalmente è possibile aggiungere solo usando stringa ma io preferisco in questo modo perché è molto più leggibile e più pulito.

$("<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"); 

Se hai davvero bisogno di sospenderlo per attributi.