I want to clone the children of #secret_tr into the tbody of the .table.
<table class="table">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="secret_tr" style="display:none;">
<div>
<table>
<tbody>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
This does not work apparently:
var template = $("#secret_tr").children().clone();
var tr = template.find("table tbody tr");
$("table.table tbody").append(tr);
However, if I run this line instead the tds are getting appended, except now I am missing the tr:
$("table.table tbody").append(tr.children());
This seams to work. I create a reference to the template. And with a reference to the <tr> I create a clone of the element. This clone can be appended <tbody>.
var template = $("#secret_tr");
var tr = template.find("table tbody tr").clone();
$("table.table tbody").append(tr);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="secret_tr" style="display:none;">
<div>
<table>
<tbody>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>