防止在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>

​