Appending a cloned tr object into a tbody, using jQuery-CodePudding

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

CodePudding user response：

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>