如何用JavaScript保留HTML指定内容并清除页面其余部分？

我正在为个人作品集制作一个简易的问卷生成网站，网站设有添加问题和答案的按钮，添加内容后会在操作按钮所在的fieldset下方生成问卷预览区域。点击页面底部的Create按钮时，我希望仅保留preview-container这个div元素，清除页面其余所有内容。请问除了使用body.removeChild()逐个删除元素外，是否有更简便的实现方式？

相关代码 #

<body id="quiz-body">
    <h1>Let`s make a quiz</h1>
    <form id="quiz-form">
        <fieldset class="quiz-type" id="quiz-type">
            <label>Will this quiz be anonymous:</label>
            <label for="anonymous-quiz"
            ><input
              id="anonymous-quiz"
              type="radio"
              name="quiz-type"
              class="inline"
              value="anonymous"
              checked
            />
            Yes, do not require participant name.</label>
            <label for="non-anonymous-quiz"
              ><input
                id="non-anonymous-quiz"
                type="radio"
                name="quiz-type"
                class="inline"
                value="non-anonymous"
              />
              No, do require participant name.</label
            >

            </fieldset>
        <fieldset class="fieldset">
            <label>Add a question:</label>
            <input type="text" id="question-input">
            <button type="button" id="add-question" class="add__Question"><span class="material-symbols-outlined">
                add
                </span></button>
        </fieldset>
        <fieldset id="answersDisplay" class="answers__Display">
            <p id="added-question"></p>
            <label>Add answer:</label>
            <input type="text" id="answer">
            <label for="true">
            <input  class="check" id="true-answer" type="radio" name="answer-value" value="true" checked>True</label>
            <label for="false">
                <input class="check" id="false-answer" type="radio" name="answer-value" value="false">False</label>
            <button type="button" id="add-answer" class="add__Answer"><span class="material-symbols-outlined">
            add
            </span></button>
        </fieldset>
        </fieldset>
    <div id="preview-container">
        <h2>Preview</h2>
        <fieldset id="preview">
            <input type="text" id="name-input" placeholder="Please enter your name">
        </fieldset>
    </label>
    </div>
    <button id="create-quiz">Create</button>
    <script type="text/javascript" src="quiz.js"></script>
</form>
</body>

当然有更简便的方法，以下几种方案都能高效实现需求：

1. 使用replaceChildren（最简洁，现代浏览器支持） #

现代浏览器支持的Element.replaceChildren()方法可以直接将<body>的所有子元素替换为目标的preview-container，一步到位：

document.getElementById('create-quiz').addEventListener('click', () => {
  const preview = document.getElementById('preview-container');
  document.body.replaceChildren(preview);
});

这个方法会自动把preview-container从原父节点（你的<form>）移动到<body>下，同时清空<body>里的其他所有元素，完全符合需求。

2. 清空<body>后重新添加目标元素 #

如果需要兼容更老的浏览器，可以先保存preview-container的引用，清空<body>后再把它加回去：

document.getElementById('create-quiz').addEventListener('click', () => {
  const preview = document.getElementById('preview-container');
  // 先移除预览容器，避免被清空操作删除
  preview.remove();
  // 清空body所有内容
  document.body.innerHTML = '';
  // 将预览容器添加回body
  document.body.appendChild(preview);
});

如果需要保留原元素上绑定的事件监听，这种方法比克隆更可靠。

3. 隐藏其他元素（视觉清除，适合需保留DOM的场景） #

如果你不需要彻底删除其他元素，只是让它们不可见，可以给除了preview-container之外的所有元素添加隐藏类：
首先在CSS中定义隐藏样式：

.hidden {
  display: none !important;
}

然后在JS中实现：

document.getElementById('create-quiz').addEventListener('click', () => {
  const preview = document.getElementById('preview-container');
  // 遍历body下的所有直接子元素
  Array.from(document.body.children).forEach(elem => {
    if (elem !== preview) {
      elem.classList.add('hidden');
    }
  });
});

这种方法适合后续需要恢复其他元素的场景，但元素仍存在于DOM中。

内容的提问来源于stack exchange，提问作者KChimev