Question

I have the following HTML:

<table id="tableName">
  <tr>
    <td>One</td>
  </tr>
</table>

<div id="divTableRow">
  <tr>
    <td>Two</td>
  </tr>
</div>

I have the following code:

$('#tableName').append($('#divTableRow').html());

I have tried many ways such as targeting the tbody that jQuery creates however my TR and TD tags are never brought across.

Is there a way to encapsulate the html so it is inserted exactly as it is?
I can not put everything in quotes as it contains a lot of inputs etc

Answer 1

That is completely invalid html so do not expect it to ever work. Why would you have table rows in a div?

This would work

http://jsfiddle.net/mplungjan/ZHuuY/

$("#tableRow tr").each(function() {
    $('#tableName').append($(this).clone());
});                             

or this if you want to move rather than copy

$("#tableRow tr").each(function() {
  $('#tableName').append($(this));
});                             

<table id="tableName" style="border:1px solid green">
  <tr>
    <td>One</td>
  </tr>
</table>

<table id="tableRow" style="display:none">
  <tr>
    <td>Two</td>
  </tr>
  <tr>
    <td>Three</td>
  </tr>
  <tr>
    <td>Four</td>
  </tr>
</table>

generated html:

<table style="border:1px solid green" id="tableName">
  <tbody>
  <tr>
    <td>One</td>
  </tr>
  <tr>
    <td>Two</td>
  </tr>
  <tr>
    <td>Three</td>
  </tr>
  <tr>
    <td>Four</td>
  </tr>
  </tbody>
</table>