I am trying to create a nested table, which will work by adding a row after the one clicked by the user and then within the new row, adding a table with additional details of the item shown. An example of the type of nesting is shown below:

```html
<table>
  <tr id="1">
    <td></td>
    <td></td>
  </tr>
  <tr id="2">
    <td></td>
    <td></td>
  </tr>
</table>

<table>
  <tr id="1">
    <td></td>
    <td></td>
  </tr>
  <tr id="1a">
    <table>
      <tr>
        <td></td>
        <td></td>
      </tr>
    </table>
  </tr>
  <tr id="2">
    <td></td>
    <td></td>
  </tr>
</table>
```

Jquery picks up the user click and asks PHP for the detail, which it then appends as follows:

```js
$.ajax({
    type: "POST",
    url: "php/getDetail.php",
    data: {
        id: data_id
    },
    cache: false,
    success: function(data) {
        $('#' + row_id).after(data);
    }
});
```

This adds the row to the original table, but it omits the enclosing tags for the nested table and you end up with this:

```html
<table>
  <tr id="1">
    <td></td>
    <td></td>
  </tr>
  <tr id="2">
    <td></td>
    <td></td>
  </tr>
</table>

<table>
  <tr id="1">
    <td></td>
    <td></td>
  </tr>
  <tr id="1a">
        <td></td>
        <td></td>
  </tr>
  <tr id="2">
    <td></td>
    <td></td>
  </tr>
</table>
```

It appears that somewhere along the line, between the Jquery call and the browser rendering, the nested table tags are stripped out. Has anyone else come across this before?