Javascript/Jquery “create” elements with .html() and .append()

Question

This is a part of code from my little "Online-Shop", you can see that I append a table to my main div.

$('div.main').html('<table class="clothes">' +
                '<tr>' +
                '<td><div class="product"><img class="product_img" src="men_jacket1.jpg"><div class="price"><span class="price_text">95 €</span> <div id="m1" class="price_img-wrapper"><img src="cart_mini.png"></div></div></div></td>' +
                '<td><div class="product"><img class="product_img" src="men_jacket2.jpg"><div class="price"><span class="price_text">70 €</span> <div id="m2" class="price_img-wrapper"><img src="cart_mini.png"></div></div></div></td>' +
                '<td><div class="product"><img class="product_img" src="men_jacket3.jpg"><div class="price"><span class="price_text">55 €</span> <div id="m3" class="price_img-wrapper"><img src="cart_mini.png"></div></div></div></td>' +
                '</tr>' +
                '<tr>' +
                '<td><div class="product"><img class="product_img" src="men_tshirt1.jpg"><div class="price"><span class="price_text">10 €</span> <div id="m4" class="price_img-wrapper"><img src="cart_mini.png"></div></div></div></td>' +
                '<td><div class="product"><img class="product_img" src="men_tshirt2.jpg"><div class="price"><span class="price_text">25 €</span> <div id="m5" class="price_img-wrapper"><img src="cart_mini.png"></div></div></div></td>' +
                '<td><div class="product"><img class="product_img" src="men_tshirt3.jpg"><div class="price"><span class="price_text">30 €</span> <div id="m6" class="price_img-wrapper"><img src="cart_mini.png"></div></div></div></td>' +
                '</tr>' +
                '<tr>' +
                '<td><div class="product"><img class="product_img" src="men_trouser1.jpg"><div class="price"><span class="price_text">20 €</span> <div id="m7" class="price_img-wrapper"><img src="cart_mini.png"></div></div></div></td>' +
                '<td><div class="product"><img class="product_img" src="men_trouser2.jpg"><div class="price"><span class="price_text">70 €</span> <div id="m8" class="price_img-wrapper"><img src="cart_mini.png"></div></div></div></td>' +
                '<td><div class="product"><img class="product_img" src="men_trouser3.jpg"><div class="price"><span class="price_text">45 €</span> <div id="m9" class="price_img-wrapper"><img src="cart_mini.png"></div></div></div></td>' +
                '</tr>' +
                '</table>');

My question is: Is this the right way to append or create html elements and if not, why? For example, I got the price, img, etc. from a database, work this code if I insert it with my idea?

Answer 1

My humble advice would be to use some form of javascript templating engine. I often use the variation of John Resig microtemplating that is included in underscore.js , a wonderful little library with more than 80 utility functions which is by itself a little treasure.

It goes something like this:

In your html you define the template inside an appropriate tag, the example is for underscore/Resig microtemplating. In your case I would use a loop to iterate through the products

<script type="text/template" id="clothesTableTemplate">
  <table class="clothes">
    <% clothes.forEach(function(cloth){ %>
    <tr>
      <td>
        <div class="product">
          <img class="product_img" src="<%- cloth.imgSrc %>">
          <div class="price">
            <span class="price_text"><%- cloth.priceText %></span> 
            <div id="m1" class="price_img-wrapper">
              <img src="cart_mini.png">
            </div>
          </div>
        </div>
      </td>
    </tr>
    <% }); %>
  </table>
</script>

Then you can call the template from your js like this:

// say you got this data from the db

var clothes = [
  {
    imgSrc: 'men_jacket1.jpg',
    priceText: '95 €'
  },
  {
    imgSrc: 'men_jacket2.jpg',
    priceText: '70 €'
  }
];

var clothesTemplate = _.template(
  $("script#clothesTableTemplate").html()
);

$('div.main').html(clothesTemplate(clothes));

// With little modifications we could also define a template containing
// only the row and append single rows to the table

Other widely used templating systems are Handlebars and Mustache

Another, somewhat different approach is that of Knockout js , it's very clean and something I'd wholeheartedly suggest to look into.

Answer 2

to append, you use something like this

$('div.main').append('blablab');

the $('div.main).html is in fact equal to

document.getElementById('div.main').innerHTML = 'blablab';

It is correct JQuery syntax but I don't recommend just addin static HTML using Javascript, which doesn't get any advantages.

Answer 3

You have to better methods:

1 - Use .load() and return the html on the request

$('div.main').load(some_url);

now, use an url form your website that renders the table you need (only the table) and you are done, you define html serverside and jquery only load it, I would do this

2 - Use jQuery to create elements, this give you more control

var table = $('<table>').addClass('clothes');
var tr = $('<tr>');
var td = $('<td>');
var div = $('<div>')addClass('product');
var img = $('<img>').addClass('product_img').attr('src',"men_trouser1.jpg");
div.append(img);
td.append(div);
tr.append(td);
table.append(tr);
$('div.main').append(table);

it's ugly because using javascript to create html is always ugly, at least this way have more control (you could create the td's inside a loop and append them one by one). I would the the first method, create the table serverside