使用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问题中报告的一些基准测试,我相信使用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>").attr({
    'class': "iviewer_image_mask",
    'style': "background: url('http://somesite.com/path/to/image.jpg');"
}).appendTo("body");

如果你真的需要通过属性追加它.

Answer 4

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