document.write()在<head>中异常，如何实现Text 11的完整输出？

阿华AIGC实验室

2026-5-13

问题分析与解决方案

你遇到的核心问题是页面加载完成后调用document.write()会覆盖整个文档，这也是为什么你只能看到11而看不到Text的原因——当你点击按钮触发myFunction时，页面已经完全加载完毕，浏览器已经关闭了初始的文档流，这时候调用document.write()会清空所有现有HTML内容，包括你原来的<p id="demo">元素，自然就看不到设置的Text了。

另外你提到在<head>里放脚本会有问题，这是因为脚本执行时<body>还没被解析，document.getElementById("demo")找不到对应的元素，不过这不是你当前输出问题的关键。

解决方法（推荐）：用DOM操作替代`document.write()`

现代前端开发中几乎不会用document.write()来动态添加内容，更安全可靠的方式是直接操作DOM元素：

方案1：直接修改目标元素的innerHTML

把结果直接拼接到demo元素的内容里，最简单直接：

<html>
<head>
  <title>Output</title>
  <script>
    function myFunction() {
      // 直接把Text和计算结果合并到innerHTML中
      document.getElementById("demo").innerHTML = "Text " + (5 + 6);
    }
  </script>
</head>
<body>
  <p id="demo">
    <button onclick="myFunction()">Touch me</button>
  </p>
</body>
</html>

方案2：创建新元素追加到页面

如果需要分开添加内容（比如后续要对计算结果做样式处理），可以创建新元素再插入：

<html>
<head>
  <title>Output</title>
  <script>
    function myFunction() {
      const demoEl = document.getElementById("demo");
      // 设置Text内容
      demoEl.innerHTML = "Text";
      // 创建一个新的span元素存放计算结果
      const resultEl = document.createElement('span');
      resultEl.textContent = ' ' + (5 + 6);
      // 把结果元素追加到demo元素里
      demoEl.appendChild(resultEl);
    }
  </script>
</head>
<body>
  <p id="demo">
    <button onclick="myFunction()">Touch me</button>
  </p>
</body>
</html>

为什么`document.write()`会导致这个问题？

简单来说：

当页面正在加载时（比如脚本放在<body>里执行），document.write()会把内容插入到当前文档流中，不会覆盖现有内容；
但页面加载完成后，document.write()会自动调用document.open()，这会清空当前文档的所有内容，然后写入新内容，写完后还会调用document.close()，所以你原来的页面结构就没了。

所以除非是在页面初始化加载时动态写入内容，否则绝对不要用document.write()。

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