jquery - 使用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 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);

Answer 3

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

Answer 4

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

如果您确实需要通过属性附加它。

Answer 5

我在这本书《使用 jQuery 开始 JavaScript 和 CSS 开发》中读到：

在前面的章节中，您已经看到了 jQuery 用来操作类名的 addClass()、hasClass() 和 removeClass() 方法的示例。在客户端 Web 开发中，最好的做法是避免将样式声明直接放在 JavaScript 代码中，而是通过在 CSS 中放置样式并在需要的情况下操作元素的类名来保持行为和表示的分离风格的操纵。这被认为是最佳实践是有原因的：它最有意义. 由于您的所有演示文稿都整齐地包含在 CSS 中，您的行为在 JavaScript 中，您的结构在 HTML 中，您的文档变得更容易管理，因为在哪里进行修改更容易预测。如果您的样式分散在 HTML、JavaScript 和实际样式表中，那么更改文档的呈现方式将变得更加困难。

依此类推，使用类名。为你的目的。像这样：

$('<div class="iviewer_image_mask background-image"></div>').appendTo(this.container);