How to set content for template in JavaScript-CodePudding

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

CodePudding user response：

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>