evmqoa
Last Updated: March 03, 2017
·
54.91K
· dperrymorrow
37b092a324da25d53fd63d780692b174

creating DOM elements with jQuery in a more elegant way

So you are dynamically creating dom elements using jQuery? Do you hate html in you javascript code as much as I do?

Does this gross you out?

$('body').html($('<div class="spinner"></div>'));

To me, this is slightly more elegant.

$('body').html($('<div>', {class: 'spinner'}));

It also makes it easier if you have dynamic properties, such as id created from a primary key, a conditional class.

13 Responses
Add your response

3425
D42a7264714dee5006b9c99d2567a320

Um, doesn't this simply work? Why create a jquery object?

$('body').html('<div class="spinner"></div>')

over 1 year ago ·
3427
7831f9c652845c34091da263b689cc25

I think the point was to create a DOM element without writing to much html. Maybe the example is a bit misleading.

over 1 year ago ·
3429
Mich400x400

I've always been doing my jQuery DOM element creation this way, mostly because it allows you to attach event handlers to element right in there.

As a side note though, if you're doing lots of complicated DOM element creation, it could be better to go with client-side templates. This is a decent introduction to doing that using underscore.js: Using Underscore.js Templates To Render HTML Partials

over 1 year ago ·
3430
37b092a324da25d53fd63d780692b174

@dpashkevich yeah it does simply work, but as i was saying in my example when you have dynamic attributes I find it cleaner, personal preference.

var className = "booya";
$('body').html($('<div>', {class: className}));
over 1 year ago ·
3435

pretty good...

over 1 year ago ·
3440
D42a7264714dee5006b9c99d2567a320

@dperrymorrow oh ok, now I see!

over 1 year ago ·
6756
C3ebe9f9cff5d0d925e5e52f8f869f49

just use mootools

over 1 year ago ·
6761
37b092a324da25d53fd63d780692b174

Yeah, writing HTML in your JS is less than ideal and should be avoided. I would push for always using javascript templates. But, sometimes you find yourself in this situation.

over 1 year ago ·
6773
2bebf4cb2fc99965264410111a0d2239

This is far more elegant than either of those approaches.

document.body.grab(new Element('div').addClass('spinner'));
over 1 year ago ·
12178
5c58ab0ee9b7e6a62ba6959ad6462cb3

@milesj: where can I find the documentation for grab()?

over 1 year ago ·
12179
5c58ab0ee9b7e6a62ba6959ad6462cb3

Ok, I see the grab() method belongs to Mootols.

over 1 year ago ·
13585
E399e50701a7c1842d1f1c168b7c83b0

For the record, I am of the opinion that there is no justifiable reason to mix html of any kind in with JS.

Yeah.
I said it.

over 1 year ago ·
14032
D42a7264714dee5006b9c99d2567a320

I suggest posting a slightly longer example to make the point, like this one:

$('<li>', {
     html: $('<a>', {
          href: item.href,
          text: item.title
     })
 });

I agree that you shouldn't mix html and js though, but it may not be worth it to include a template engine into your project if you're adding a small and simple feature to a website.

over 1 year ago ·