CODEWITHSUNDEEP
jquery
geoffs3310
geoffs3310

Reputation: 14018

is it wrong to use jquery to output html tags?

Just wondered is it bad practice to output html tags with javascript. For example say I had a table and on the page load an ajax request gets the data to populate it. For each row of data I'm going to need to output another row, something like this:

$('#results').html('<tr><td>'+data.people[i]['name']+'</td><td>'+data.people[i]['age']+'</td><td>'+data.people[i]['gender']+'</td></tr>');

Is it bad to do this?

Upvotes: 5

Views: 3153

Answers (9)

meo
meo

Reputation: 31249

its not bad. There are two things you could do to imrove it:

I suppose you have this in a each loop, so you could construct your full table before setting it with HTML. So you do the .html() operation just once.

var yourTableHTML = ""

$.each(yourContentArray, function(data,i){
  youtTableHTML += '<tr><td>'+data.people[i]['name']+'</td><td>'+data.people[i]['age']+'</td><td>'+data.people[i]['gender']+'</td></tr>'
})

$('#results').html(yourTableHTML);

The second thing is, that you could use a HTML model inside you HTML file (a model row) that you clone. So if anyone else has to change the HTML once, he does not need to change the javascript to.

Upvotes: 3

David Tang
David Tang

Reputation: 93674

Rather than saying what's best practice I'll just give you the pros and cons of directly inserting HTML:

Pros:

  • Fast. This is much faster than creating individual elements using jQuery and appending them one at a time.

  • Basic. Since it's just a string, you can perform neat tricks like this:

    var lis = ['One', 'Two', 'Three'];
var html = '<li>' + lis.join('</li><li>') + '</li>';

    Many other operations are equally as flexible when working directly with strings.

Cons:

  • Error-prone. It's easy to make a mistake in not only the string, but the data too. If your data has unescaped HTML characters, then your string could be broken.
  • Harder to read (arguable). Many variables interpolated between the strings could make it harder to read. Others may argue though that many .append()s and .addClass() and .attr() make it even harder.

For the sake of comparison, your example without using .html():

var tr = $('<tr>');
$('<td>').text(data.people[i]['name']).appendTo(tr);
$('<td>').text(data.people[i]['age']).appendTo(tr);
tr.appendTo('#results');

Upvotes: 2

Neil
Neil

Reputation: 5780

Well, no. It's fairly acceptable practice so long as you keep it in small doses. Doing too much can add noticeable latency on the web page. I would keep it more structural, though that's just a personal preference:

var tr = $('<tr></tr>');

var td = $('<td></td>');
td.text(data.people[i]['name']);
tr.append(td);

td = $('<td></td>');
td.text(data.people[i]['age']);
tr.append(td);

$('#results').html(tr);

Doing it this way ensures that it's easier to read (at least in my opinion) and therefore a lot easier to fix/add to later.

Upvotes: 1

dortzur
dortzur

Reputation: 1666

I think the most complete answer is: it's ok to add html tags in jQuery, javascript and the like as long there isn't a different way to accomplish the task you wish to perform. To clarify - it's not ok to build an entire static page with jQuery when you could build it normally with html, it is ok to add dynamic content to a webpage with jQuery, that's one of the main reasons it's there.

Upvotes: 1

timdream
timdream

Reputation: 5922

It's normal, as sushil bharwani suggests. However:

  1. Be sure to use close tags.
  2. Be sure the data doesn't contain any tags.
  3. Limit the size of the string; browser could hang if it's too long.

Upvotes: 1

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146460

I would not recommend it since you are skipping the built-in functionality to escape input. I'm not sure if it's a security vulnerability but it's never good practice to inject random stuff into strings that expect certain format. Try the jQuery.text() method instead.

Upvotes: 0

Shikiryu
Shikiryu

Reputation: 10219

It's ok only if this JS is in an external file.

Else, IE can drive you crazy and your HTML won't validate if in XHTML and strict.

Upvotes: 2

Aliostad
Aliostad

Reputation: 81660

This is the recent trend to use web site to work as a web server and provide data and then client side scripting to create the UI.

It is definitely not bad and it will limit the amount of data being passed and provides betters server/client, business/UI separation.

The caveat is that relying to much on the client will put a pressure on the browser. If client is a smartphone, it could struggle with too much JavaScript.

Upvotes: 1

sushil bharwani
sushil bharwani

Reputation: 30187

No this is normal practice. This is how you would normally add html dynamically on the fly.

Upvotes: 5

Related Questions