如何向document.documentElement.innerHTML注入HTML且不自动闭合<body>标签

问题根源 #

直接通过document.documentElement.innerHTML替换整个根元素内容时，浏览器会自动补全HTML结构（比如自动闭合<body>标签），导致后续页面内容被解析到<html>标签之外，无法正常显示。同时如果脚本加载时机不对，还会出现无样式文本（FOUC）问题。

可行方案 #

方案1：分步注入Head与Body内容（推荐） #

不要替换整个根元素，而是分别向现有head和body插入样板内容，既保留原有页面结构，又能优先加载样板：

1. 将boot.js放在<head>最顶部（同步加载）
   确保脚本在页面内容渲染前执行，避免FOUC。不要加async或defer属性。

2. 编写boot.js逻辑
   拆分样板代码为headContent（<head>内的meta、样式、标题等）和bannerContent（<body>内的banner结构），分别插入：

   // 样板中的head内容（不含<head>标签本身）
   const headContent = `
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>网站标题</title>
     <link rel="stylesheet" href="global.css">
     <!-- 其他head内元素 -->
   `;
   // 样板中的banner内容
   const bannerContent = `
     <header class="banner">
       <!-- banner结构 -->
     </header>
   `;
   
   // 向现有head插入内容
   document.head.insertAdjacentHTML('beforeend', headContent);
   // 向body最顶部插入banner（页面内容会自动排在banner下方）
   document.body.insertAdjacentHTML('afterbegin', bannerContent);
   

   这种方式不会破坏原有DOM结构，后续页面内容会正常渲染在banner之后。

方案2：使用document.write在解析阶段插入样板 #

利用浏览器HTML解析流程，在<head>中同步执行document.write输出完整样板框架，后续页面内容会自动衔接：

<head>
  <script>
    // 输出完整样板的前半部分（到banner结束，不闭合<body>和<html>）
    document.write(`
      <!DOCTYPE html>
      <html>
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>网站标题</title>
        <link rel="stylesheet" href="global.css">
      </head>
      <body>
        <header class="banner">
          <!-- banner结构 -->
        </header>
    `);
  </script>
  <!-- 其他head内脚本/样式 -->
</head>
<!-- 页面实际内容直接写在这里，会自动进入样板的<body>内 -->
<main>
  <!-- 页面内容 -->
</main>
<script>
  // 可选：在页面末尾闭合标签（浏览器也会自动补全，但显式闭合更规范）
  document.write('</body></html>');
</script>

注意：document.write仅在页面解析阶段（<head>同步执行）安全，DOM加载完成后使用会覆盖整个页面，因此只适合这种提前注入样板的场景。

避免FOUC的关键 #

• 确保样板中的CSS优先加载：要么将全局样式内联在样板的<head>中，要么使用同步加载的<link>标签（不要加async）。
• 脚本必须同步放在<head>顶部，保证在页面内容渲染前完成样板注入。

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