using jquery to dynamically create div

Question

I am trying to add a background image to a dynamically generated div. When I add the CSS property for the background, like below, it breaks my plugin:

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

Anybody know what I am doing wrong to add the background image?

Answer 1

Of course you can add it only using string but I prefer this way because it's much more readable and cleaner.

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

demo

Answer 2

According to some benchmarking reported in this SO question, I believe the most efficient way to create your HTML element using jQuery would be this:

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

Or for some extra readability:

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