using jquery to dynamically create div

Question

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>", {
    '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?

per jquery docs: The name `class` must be quoted in the map since it is a JavaScript reserved word. http://api.jquery.com/jQuery/#jQuery2 — thindery, Jul 31 '12 at 21:36

Ricardo Alvaro Lohmann · Answer 1 · 2012-07-31T21:48:06.207

27

Of course you can add it only using string but I prefer this way because it's much more readable and cleaner.

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

demo

edited Jul 31 '12 at 21:48

answered Jul 31 '12 at 21:33

Ricardo Alvaro Lohmann

26,031
7
82
82

score 23 · Accepted Answer · edited May 23 '17 at 12:02

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:

$('<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);

score 9 · Answer 3 · answered Jul 31 '12 at 21:32

9

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

answered Jul 31 '12 at 21:32

Mitya

33,629
9
60
107

score 9 · Answer 4 · edited Jun 05 '18 at 17:38

9

$("<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.

edited Jun 05 '18 at 17:38

RickL

3,318
10
38
39

answered Jul 31 '12 at 21:37

Flops

1,410
15
18

score 0 · Answer 5 · answered Aug 17 '18 at 15:00

i read in this book Beginning JavaScript and CSS Development with jQuery that:

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 presentation by placing styles in your CSS and manipulating the class names of 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.

so on, use class name. for your purpose. like this:

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

using jquery to dynamically create div

5 Answers5

Linked