templateタグはcontent.firstElementChild.cloneNode(true)がおすすめ

はじめてtemplateタグを使って、すこし嵌りました。

MDNのtemplateタグの使い方のサンプルは、template.content.cloneNodeを行っています。
私は最初これはtr要素だと思っていました。trにidを設定するつもりで
clone.setAttribute('id','id_of_tr_element')を行ったのですが、設定できないなとおもっていたところ、これはDocumentFragmentでした。

以下はMDNからの抜粋

    // 既存の HTML tbody と template の行を使って
    // table をインスタンス生成します。
    var tbody = document.querySelector("tbody");
    var template = document.querySelector('#productrow');

    // 新しい行を複製して表に挿入します。
    var clone = template.content.cloneNode(true);
    // cloneがtrだと思っていた
    var td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tbody.appendChild(clone);

<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- 必要に応じて既存のデータをここに含められます。 -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

これはMDNのページでもDocumentFragment の落とし穴の回避 として記載がありました。

templateタグの子として複数要素ある場合でなければ、template.content.firstElementChild.cloneNode(true)が楽ちんです。

難しいことをしているわけではないだろうとおもってドキュメントを最後まで読むのを怠たりました。