Запретить загрузку шаблона в DOM для начальной загрузки

Question

Мне нужно предотвратить загрузку тегов шаблонов в DOM в начальной загрузке. У меня есть HTML-теги, которые действуют как шаблон. Мне нужно вставить этот код после выполнения действия, но сначала он был добавлен в DOM. Мне нужно, чтобы предотвратить добавления в DOM

<div id="template-1"> 
    Hello world Template-1 
</div> 
<div id="template-2"> 
    Hello world Template-2 
</div> 
<button onclick="myFunction()">Click me</button> 
<div id="CustomTempl"></div> 

В приведенном выше коде, мне нужно, чтобы сделать шаблон 2, когда мы только нажать на кнопку, но он показывал загрузку страницы. Мне нужно это предотвратить.

В демонстрационном примере я добавил шаблон 2 в функцию onclick и отформатировал CSS.

https://jsfiddle.net/vbpradeep/qu9210wk/

Answer 1

Если вы хотите использовать шаблоны способ не использовать documented example так:

<button onclick="useIt()">Use me</button> 
 
<div id="container"></div> 
 
<script> 
 
    function useIt() { 
 
    var content = document.querySelector('template').content; 
 
    // Update something in the template DOM. 
 
    var span = content.querySelector('span'); 
 
    span.textContent = parseInt(span.textContent) + 1; 
 
    document.querySelector('#container').appendChild(
 
     document.importNode(content, true)); 
 
    } 
 
</script> 
 

 
<template> 
 
    <div>Template used: <span>0</span></div> 
 
</template>