Untitled

Embed once declared html content at muliple places within a page
<ul>
  <li>A</li>
  <li>B</li>
  <li>...</li>
  <li>X</li>
</ul>

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

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

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')));

$(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"));
});