Embed once declared html content at muliple places within a page

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

1. I really suggest that you have a look at the Handlebars(js framework.) Shortly speaking, it's a js template framework. http://handlebarsjs.com/

2. In this case, I suggestion you use requirejs to define your module with the html fragment and then whenever you need to use it you can require it and compile the template into what you want.

3. Also you can use jquery or other js lib to change the attribute of the html element as Philip Walton said. $("ul").eq(0).removeClass("right").addClass("left")

Answer 2

The best option I can see is use javascript. You can use JQuery for easy syntax. Just define this reusable markup in one variable and insert it at various places on document ready event by setting innerHtml of your left and right divs.

$(document).ready(function() {
   var reusablehtml ="<ul id='nameplaceholder'><li>A</li><li>B</li><li>...</li><li>X</li></ul>";
   $("#left").html(reusablehtml.replace("nameplaceholder", "listA"));
   $("#right").html(reusablehtml.replace("nameplaceholder", "listX"));
});

Answer 3

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/