Onclick event dynamically build and append div to an existing div (jquery or otherwise anything welcome)

Question

I have a div in the following format. 1. How Can I add this to an existing div. Do I create a seperate html file and then add it using jquery? or Should I append this into a var and then append it to the div. Pls suggest a way to 1 append and create the div and then append it within another div(whose id i know)

<div>
  <table>
    <tr><td></td><td></td><td></td>
    </tr>
  </table>
  <table>
    <tr><td></td><td></td>
    </tr>
    <tr><td></td><td></td><td></td><td></td>
    </tr>
  </table>
  <table>
    <tr><td></td>
    </tr>
  </table>
</div>

Answer 1

You can try something like this (using jQuery):

HTML:

<div id="content" style="display: none;">
  <div>
    <table>
      <tr>text here and then some input tag
      </tr>
    </table>
    <table>
      <tr>text here and then some input tag
      </tr>
      <tr>text here and then some input tag
      </tr>
    </table>
    <table>
      <tr>text here and then some input tag
      </tr>
    </table>
  </div>
</div>

<div id="receiver1" style="background: #FF0000;"></div>
<div id="receiver2" style="background: #00FF00;"></div>
<div id="receiver3" style="background: #0000FF;"></div>

JS:

$(function(){
    var theContent = $( "#content" ).html();
    $( "#receiver1" ).html( theContent );
    $( "#receiver2" ).html( theContent );
    $( "#receiver3" ).html( theContent );
});

You can view the example here: http://jsfiddle.net/3hm6N/1/

Of course, you can use the approach that Greg Pettit said. Another thing, I didn't saw it, but your table is missformated since the tags should have <td>s or <th>s inside.