Generating HTML via javascript/jquery. Good programming practice?

Question

Is it good practice to generate HTML through Javascript/Jquery like this:

$('<input></input>', {
      'id': this.elements.verticalPanel.layout2,
      'type': 'button',
      'value': '2',
      'data-toggle': 'tooltip',
      /*'title': 'Layout 2',*/
      'class': this.elements.verticalPanel.panelElement
    })
      .tooltip()
      .appendTo(div);

This is just a small snippet from my code.

Well the functionality works just fine, but I was curious as to know whether other developers follow this practice ?

In small doses, yes. But if you find you're doing it a lot then you probably need to use a templating engine. And you can always just write hidden HTML and use that instead. — johnnycardy
– johnnycardy, Commented Jan 9, 2014 at 8:27
I would say, this is quite readable. As said above, large amounts of html should always be created as plain html with templates etc.. I always try to maintain program whole picture as clear as possible so everyone can take a quick look and understand what program does and how. — makallio85
– makallio85, Commented Jan 9, 2014 at 8:28
if code is small (< few hundred lines), then yes, it is OK. when it is growing larger, consider using mustache, handlebars, dust.js etc. — akhikhl
– akhikhl, Commented Jan 9, 2014 at 8:29
It is not generally wrong, but using templates is imo good practice. If you're interested in, look things up like e.g. underscore templates. If not, as long as your solution works out for you it's fine ;) — Igl3
– Igl3, Commented Jan 9, 2014 at 8:31

Geuis · Accepted Answer · 2014-01-09 08:40:35Z

Like that is fine in small doses. If you are in a situation where you need to generate a lot of html, there's a much better way to do it.

Basically, build up your html as a string. Then create an in-memory element and set its innerHTML to your string. You can then append the element to somewhere in the DOM, or operate on its child elements (your html) and do whatever needs doing.

Here's a simple, quickly hacked together sample: http://jsfiddle.net/ygL7f/

var sample = ['<ul>'],
    els = 1000;

for(var i=1; i<els; i++){
    sample[i] = '<li>'+ (Math.random() * 10) +'</li>'
}

sample.push('</ul>');

var root = document.createElement('div');
root.innerHTML = sample.join('');

document.querySelector('body').appendChild(root);

The critical thing to remember when generating lots of html this way is to avoid function calls wherever possible. Function calls are expensive.

In my sample, notice how I'm assigning the html directly to the array index instead of calling sample.push('string'). Faster this way.

user1721049 · Accepted Answer · 2014-01-09 08:32:08Z

1

I am a web developer for many years. we use this method only for generating dynamic updated html and few html code. sometimes it is difficult to navigate correctly through this newly generated dom . the disadvantage of this method is that user can't load those html if javascript is blocked by the user browser

answered Jan 9, 2014 at 8:32

user1721049

Comments

robnick · Accepted Answer · 2014-01-09 08:29:14Z

0

JQuery can be used to manipulate, and generate, HTML. Good practice would also mean you clearly comment your code and refactor it to simple re-usable components. What you are doing isn't "wrong".

answered Jan 9, 2014 at 8:29

robnick

1,76817 silver badges27 bronze badges

Comments

Barmar · Accepted Answer · 2014-01-09 08:40:04Z

0

If you need to generate DOM elements dynamically, the alternative to this would be a long sequence of string concatenations. I find this jQuery style far more readable, and I generally use it.

answered Jan 9, 2014 at 8:40

Barmar

789k57 gold badges555 silver badges669 bronze badges

Collectives™ on Stack Overflow

Generating HTML via javascript/jquery. Good programming practice?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related