jQuery 使用jquery动态创建div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11749314/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
using jquery to dynamically create div
提问by thindery
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。当我为背景添加 CSS 属性时，如下所示，它破坏了我的插件：
$("<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?
有人知道我在添加背景图片时做错了什么吗？
回答by Ricardo Alvaro Lohmann
回答by Christofer Eliasson
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:
根据this SO question中报告的一些基准测试，我相信使用jQuery创建HTML元素的最有效方法是：
$('<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);
回答by Utkanos
$("<div>")
.addClass('iviewer_image_mask')
.css('background', "url('http://somesite.com/path/to/image.jpg')")
.appendTo(this.container);
回答by Flops
$("<div>").attr({
'class': "iviewer_image_mask",
'style': "background: url('http://somesite.com/path/to/image.jpg');"
}).appendTo("body");
If you really need to append it by attributes.
如果您确实需要按属性附加它。
回答by mohammad jawad Barati
i read in this book Beginning JavaScript and CSS Development with jQuerythat:
我在这本书中读到了使用 jQuery 开始 JavaScript 和 CSS 开发：
In earlier chapters, you've already seen examples of the addClass(), hasClass(), and removeClass() methods that jQuery uses to manipulate class names. It is considered best practice in client-side web development to avoid placing style declarations directly in your JavaScript code, and instead maintain a separation of behavior and presentationby placing styles in your CSS and manipulating the class namesof elements for situations in which you require a manipulation of style. This is considered best practice for a reason: It makes the most sense. Since all of your presentation is neatly contained in CSS, and your behaviors in JavaScript, and your structure in HTML, your documents become much easier to manage, since it's more predictable where to look to make a modification. If your styles are scattered inline in HTML, in the JavaScript, and in actual style sheets, then it becomes an order of magnitude more difficult to change the presentation of a document.
在前面的章节中，您已经看到了 jQuery 用来操作类名的 addClass()、hasClass() 和 removeClass() 方法的示例。客户端 Web 开发中的最佳实践被认为是避免将样式声明直接放置在您的 JavaScript 代码中，而是通过在您的 CSS 中放置样式并在您需要的情况下操作元素的类名来保持行为和表现的分离对风格的操纵。这被认为是最佳实践是有原因的：它最有意义. 由于您的所有演示文稿都整齐地包含在 CSS 中，您的行为在 JavaScript 中，您的结构在 HTML 中，您的文档变得更容易管理，因为更容易预测在哪里进行修改。如果您的样式分散在 HTML、JavaScript 和实际样式表中，那么更改文档的表示将变得困难一个数量级。
so on, use class name. for your purpose. like this:
等等，使用类名。为了你的目的。像这样：
$('<div class="iviewer_image_mask background-image"></div>').appendTo(this.container);
