Difference between HTML template content and innerHTML

Tags: , , ,

Say I have an HTML <template> tag that I define and select as follows:

  <h1>This is my template</h1>

let myTemplate = document.querySelector('template')

What is the difference between these properties of the template:




Contrary to innerHTML, content returns a document fragment, and so you get immediate access to the DOM without an intermediate conversion to and from a string.

Here is the difference in use:

let myTemplate = document.querySelector('template');

// Method 1
let myDiv1 = document.getElementById('div1');
myDiv1.innerHTML = myTemplate.innerHTML;

// Method 2
let myDiv2 = document.getElementById('div2');
  <h3>This is my template</h3>
  <p>Hello World</p>

<div id="div1"></div>
<div id="div2"></div>

Source: stackoverflow