How to use html5 <template> with jQuery

2018-03-08T05:23:00.000-08:00

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template -->

<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- existing data could optionally be included here -->
  </tbody>
</table>

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

$content = $(document.importNode($('template#productrow').prop('content'), true));
$content.find('td.record').text('foo');
$content.find('td:not(.record)').text('bar');
$('#producttable thead').append($content);

var $content = $(document.importNode($('template#productrow').prop('content'), true));

$('template#productrow').prop('content')

$('template#productrow').get(0).content;
$('template#productrow')[0].content;

document.importNode(documentFragment, true)

$(document.importNode(documentFragment, true))