如何将Node.js数据传递到本地HTML？报document未定义错误如何解决

ReferenceError: document is not defined报错的核心原因是JS运行环境错误：

• document是浏览器专属的DOM操作内置对象，仅在浏览器页面的执行上下文中存在，Node.js等本地JS运行环境不提供这个对象
• 触发报错的直接操作是你通过node index.js这类终端命令直接运行了JS文件，而非通过浏览器加载HTML页面来执行引入的JS脚本

你的HTML和JS代码本身逻辑没有语法问题，只要按正确方式运行即可：

• 确认index.js和test.html存放在同一个本地目录下
• 不要用Node命令单独运行JS文件，直接双击test.html用浏览器打开，或者通过本地静态服务托管该目录后访问test.html对应的页面地址
• 页面加载完成后点击「Add data」按钮，即可正常将预设字符串追加到页面中

当前代码把script标签放在body底部、DOM元素之后，不会出现找不到元素的问题，如果后续调整脚本位置，可以增加DOM加载完成监听，避免时序问题，优化后代码如下：

// index.js 优化版本
let some_string = "some data";

document.addEventListener('DOMContentLoaded', () => {
    const dataButton = document.getElementById("dataButton");
    dataButton.addEventListener('click', () => {
        const p = document.createElement("p");
        p.textContent = some_string;
        document.body.appendChild(p);
    })
})

优化点说明：

• 用DOMContentLoaded事件保证DOM树解析完成后再绑定事件，不受script标签位置影响
• 用addEventListener绑定事件，支持后续给同一个元素绑定多个触发逻辑
• 用textContent直接设置文本，比创建文本节点再追加的写法更简洁
• 直接使用内置的document.body获取body节点，无需通过标签选择器查询

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