如何用template元素内容替换main标签内的全部内容？

嘿，我懂你这会儿的困惑——你看到divFromTemplate看起来是空的，但其实它根本不是空的！template.content返回的是一个DocumentFragment，这是一种特殊的DOM节点，它本身不会在DOM树中显示，所以控制台里查看时可能看起来像空对象，但它确实包含了<template>标签里的所有子元素。

下面是完整的实现方案，帮你把template里的内容替换掉main中的现有内容：

步骤拆解 #

1. 获取目标元素与模板：先拿到需要替换内容的<main class="central">，以及我们要提取内容的<template id="rules">。
2. 清空main的现有内容：把main里原有的#main和footer全部移除。
3. 克隆模板内容：直接使用template.content会把模板里的内容从原位置移走（下次再用模板就没内容了），所以我们要克隆一份它的完整内容。
4. 将克隆内容插入main：把克隆后的内容添加到main中，DocumentFragment里的子元素会自动挂载到main节点下。

完整代码示例 #

// 1. 获取目标元素和template
const mainElement = document.querySelector('.central');
const rulesTemplate = document.querySelector('#rules');

// 2. 清空main内的所有现有内容
mainElement.innerHTML = '';

// 3. 深克隆template的content（true表示克隆所有子元素）
const templateContent = rulesTemplate.content.cloneNode(true);

// 4. 将克隆内容添加到main中
mainElement.appendChild(templateContent);

补充说明 #

• 如果你不想用innerHTML = ''清空内容，也可以用循环移除子元素的方式：

  while (mainElement.firstChild) {
    mainElement.removeChild(mainElement.firstChild);
  }
  

• cloneNode(true)是核心：如果不传true，只会克隆DocumentFragment本身，不会克隆它内部的header、div和footer，这样就达不到我们的需求了。

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