javascript - 完全删除/删除一个div并显示另一个(切换)

Question

我试图让一个div完全删除自身，而不仅仅是将样式设置为none，例如，我想知道是否可以完全删除并显示另一个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>