防止在DOM中加载模板以进行初始加载

我需要在初始加载时防止在DOM中加载模板标签。我有一些HTML标签作为模板。我们需要在执行操作后插入该代码，但最初它已添加到DOM中。我需要防止对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时，我们只按一下按钮，但它显示的页面加载。我需要阻止这一点。

在演示波纹管中，我在onclick函数中添加了模板2，并且我格式化了CSS。

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

来源

2016-10-03 Pradeep Kumar

请注意正确格式化你的问题。这几乎是不可读的。 –

为了解决您的问题，听起来像只需要通过CSS类在加载的元素上设置“display：none”，并且在显示HTML时删除该类 –

对模板使用'script'符号'' – Maxx

如果你想使用模板的方式不使用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>

来源

2016-10-03 08:40:14 Zorken17

这只是一个例子而已......我的问题是防止添加DOM元素不隐藏.... –

这并不会产生任何影响。你的选择是在元素渲染后隐藏/移除元素，或者在JavaScript渲染DOM之后添加元素。渲染之前，您无法操作元素。 – Zorken17

隐藏的元素不会呈现给用户，并且不会在页面上留出空间。这意味着你可以在之后用JavaScript来操纵它，但是如果DOM树中不存在该元素，则需要添加i才能操作它。我说的是$（“＃CustomTempl”）。append（$（“＃template-2”））;如果元素＃template-2不在第一个位置的DOM中，则不会工作。 – Zorken17

防止在DOM中加载模板以进行初始加载

回答

相关问题