divを完全に削除/削除して別のものを表示する（トグル）

Question

divを完全に削除しようとしていますが、スタイルをnoneに設定するだけでなく、別のものを完全に削除して表示することができますか？まだ取り出すことができるように切り替えます。これはhtmlを使って可能ですか？それを別のファイルから読み込むのが唯一の解決策ですか？

現時点では、私は選択したページに応じてユーザーをリダイレクトしていますが、理想的には同じページにすべてが必要ですが、完全に更新されます。

function showDiv(elem) { 
    if (elem.value == 19) { 
    // show div 1 
    // delete div 2 completely 
    } else if(elem.value == 20) { 
    // show div 2 
    // delete div 1 completely 
    } 
} 

Answer 1

あなたはクライアント側でこれを実行したい場合は、テンプレートのアプローチを使用することができます。

function showDiv(elem) { 
 
    var value = elem.value; 
 
    var templateId = 'template' + value; 
 
    var containerId = 'main-container'; 
 
    var template = document.getElementById(templateId); 
 
    var container = document.getElementById(containerId); 
 
    if (template && container) { 
 
    container.innerHTML = template.textContent; 
 
    } 
 
} 
 

 
showDiv({value: 19});

<select onchange="showDiv(this)"> 
 
    <option>19</option> 
 
    <option>20</option> 
 
</select> 
 

 
<div id="main-container"></div> 
 

 
<script type="text/template" id="template19"> 
 
    <div>Content 19</div> 
 
</script> 
 

 
<script type="text/template" id="template20"> 
 
    <div>Content 20</div> 
 
</script>