Example

HTML

<template id="my-template">
    <h1 id="h">Hello!</h1>
</template>

CSS

table {
  background: #000;
}
table td {
  background: #fff;
}

JavaScript

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {

   var t = document.querySelector("#my-template");
   var h = t.content.querySelector("h1");
   
   // works in Edge and FireFox
   // fails in Chrome: https://chromium.googlesource.com/chromium/blink/+/master/Source/core/dom/Element.cpp#2528
   // Chrome requires a wrapper element to make it work 
   h.outerHTML = "<h3>AAAAAAAAAAAAAA</h3>";
   
   // this fails silently in Chrome and FireFox
   //h.parentNode.innerHTML = "<h3>AAAAAAAAAAAAAA</h3>";
  
  // Clone the new row and insert it into the table
  var clone = document.importNode(t.content, true);
  document.body.appendChild(clone);
  
} else {
  // Find another way to add the rows to the table because 
  // the HTML template element is not supported.
}