完全删除/删除一个 div 并显示另一个（切换）

Question

我试图让一个 div 完全删除自己，而不仅仅是将样式设置为无，例如，我想知道是否可以完全删除并显示另一个，但切换以便仍然可以检索它。这可以使用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>