utilizando jquery para crear dinámicamente div

Question

Estoy tratando de agregar una imagen de fondo a un div generado dinámicamente. Cuando agrego la propiedad CSS para el fondo, como a continuación, se me parte el plugin:

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

Alguien sabe lo que estoy haciendo mal para agregar la imagen de fondo?

Answer 1

Según algunos evaluación comparativa se informa en este SO question, creo que la forma más eficiente de crear un elemento HTML con jQuery sería la siguiente:

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

o por alguna adicional legibilidad:

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

Por supuesto que puede agregarlo solo con una cuerda, pero yo prefiero que así sea, porque es mucho más legible y más limpio.

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

Si realmente necesita apend it por atributos.