使用jQuery來動態創建div

我想添加一個背景圖片到動態生成的div。當我添加CSS屬性爲背景，類似下面，它打破了我的插件：使用jQuery來動態創建div

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

任何人知道我在做什麼錯誤添加背景圖片？

來源

2012-07-31 thindery

爲什麼'class'在引號中但'css'不是？ – kevin628 2012-07-31 21:32:55

''background'中的分號違反了您的代碼 – kei 2012-07-31 21:33:35

每個jquery文檔：名稱'class'必須在地圖中引用，因爲它是JavaScript保留字。 http://api.jquery.com/jQuery/#jQuery2 – thindery 2012-07-31 21:36:06

根據某些標杆在此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);

來源

2012-07-31 21:34:33

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

來源

2012-07-31 21:32:58 Utkanos

當然，你可以只使用字符串添加它，但我更喜歡這種方式，因爲它更可讀和更清晰。

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

demo

來源

2012-07-31 21:33:20

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

如果你真的需要按屬性加入它。

來源

2012-07-31 21:37:45 Flops

使用jQuery來動態創建div

回答

相關問題