How do I insert a lot of html into a page with jquery?

Answer 1

You can do this many ways:

1. You can create a bunch of elements in jQuery via $('<div/>').html('Hi Mom') and build up your DOM that way
2. You can build up the HTML you want as part of your ajax return set (wastes bandwidth)
3. You can create a template and change values.

IE:

<div id="someTemplate" style="display: hidden">
    <div class="username"></div>
    ...
</div>

Now you can get the contents of someTemplate, duplicate it, fill in the details by classname, and you're good.

Answer 2

If you are generating a lot of HTML data then you could have your PHP script return the HTML and then append it using:

$.post('/Url/', data, function(html) {
  $('div#loader').append(html);
}, "html");

The advantage to this is that it's easy and allows you to reuse the HTML generation on the server. The disadvantage is it uses more bandwidth than a Json implementation.

The alternative would be to have your script return Json and build up your HTML on the client via DOM manipulation.

$.post('/Url/', data, function(x) {
  var elm = document.createElement('div');
  elm.appendChild(document.createTextNode(x.comment);
  $('div#loader').append(elm);
}, "json");

This uses less bandwidth than returning HTML but will be more complicated to create/maintain if the HTML changes.

Answer 3

I would absoluteley not recommend that you send HTML-markup in your requests. If you use JSON, for example, you will save bandwidth and your users will be happier with a site that loads up faster.

It's better if you use jQuery and JavaScript to clone a template from your page (can be a hidden div for example):

<div class="comment-template">
   <div class="header">{title}</div>
</div>

And then in your JS:

$.post('action', data, function(data) {
      var template = $('.comment-template');
      var placeholder = $('#somePlaceholder');

      for(int i = 0; i < data.length; i++) {
         var comment = template.clone();
         comment.html(comment.html.replace('{title}', data[i].title));
         comment.appendTo(placeholder);
      }
   },
   "json"
);

This sure will work alot faster than including the markup in your requests.