防止在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中加載模板以進行初始加載

回答

相關問題