How to set content for template in JavaScript

Question

From the below code not able to get the id for template. Trying to set content for template using id. But not working. How to do in JavaScript.

HTML:

 <template id="management" is="dom-if" if="[[flag]]"> </template>

JavaScript:

var flag = true;
const appDiv = document.getElementById('management');
appDiv.innerHTML = `<h1>Power management</h1>`;

Demo: https://stackblitz.com/edit/anagram-implementation-nimzfz?file=index.html,index.js

Answer 1

That is not how templates are to be used. You get the template content and THEN manipulate the content and then insert the (cloned) manipulated content into the page DOM

const appDiv = document.getElementById('management').content;
appDiv.querySelector("h1").textContent = `Power management`;
document.querySelector("body").appendChild(appDiv)

<template id="management">
  <div>
    <h1></h1>
  </div>
</template>