Question

I wish to use/embed html content (in this case a list <ul>) at many places, but declare it only once with in a page.

For example, consider the content:

<ul>
  <li>A</li>
  <li>B</li>
  <li>...</li>
  <li>X</li>
</ul>

Now this content needs to be used at many places like the following:

Use 1:

<div class='left'>
  <ul id='listA'>
    <li>A</li>
    <li>B</li>
    <li>...</li>
    <li>X</li>
  </ul>
</div

Use 2:

<div class='right'>
  <ul id="listX">
    <li>A</li>
    <li>B</li>
    <li>...</li>
    <li>X</li>
  </ul>
</div>

I am sure this can be done in server side or through Ajax calls in client side, but the objective is to optimize/reduce the html content (bytes of data) send across for every page request. So, if that particular content appears in n places in a page, it must be sent only once, then manipulated there to all n distinct places. Thus doing it in server side doesn’t makes sense and Ajax will add the transportation overload, since it is a separate call.

I assume there is nothing in html/css to do so, even iframe cannot be used for this purpose. However I am sure, javascript/jQuery can do so. How?

Answer 1

If the HTML is already on the page somewhere, you can just copy it in jQuery, change what you need to change, and then insert it somewhere else.

For example, if the only thing on your page is the <ul> you could do this:

var originalUL = $("ul");

$("body").append($('<div class="left" />').append(originalUL.clone().attr('id', 'listA')));

$("body").append($('<div class="right" />').append(originalUL.clone().attr('id', 'listB')));

Here’s an example:
http://jsfiddle.net/uU7cV/

However, if you’re going to be doing this a lot, and the changes to each instance are complex, I’d look into using a Javascript templating system or an Javascript MVC framework like Backbone.js
http://documentcloud.github.com/backbone/