使用jquery动态创建div

Posted 2023-03-05

【中文标题】使用jquery动态创建div

【英文标题】：using jquery to dynamically create div

【发布时间】：2012-07-29 18:18:29

【问题描述】：

我正在尝试将背景图像添加到动态生成的 div 中。当我为背景添加 CSS 属性时，如下所示，它破坏了我的插件：

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

有人知道我在添加背景图片时做错了什么吗？

【问题讨论】：

为什么'class'在引号中而css不是？

background 中的分号破坏了您的代码

每个 jquery 文档：名称 class 必须在地图中引用，因为它是 javascript 保留字。 api.jquery.com/jQuery/#jQuery2

【参考方案1】：

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

【参考方案2】：

当然，您可以只使用字符串添加它，但我更喜欢这种方式，因为它更具可读性和更清晰。

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

demo

【参考方案3】：

根据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);

【参考方案4】：

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

如果你真的需要通过属性附加它。

【参考方案5】：

我在这本书中读到Beginning JavaScript and CSS Development with jQuery：

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

等等，使用类名。为你的目的。像这样：

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