如何使用JavaScript读取同目录文本文件内容并设置到指定ID元素的innerHTML中？

嘿，我来帮你搞定这个问题！你要的是直接读取同目录下的文本文件内容，然后把它放到ID为foo的元素里，完全不需要用户上传文件，对吧？那用现代浏览器支持的Fetch API就可以轻松搞定，这是最简洁的方案了。

具体实现步骤： #

• 首先，用document.getElementById('foo')获取到目标元素。
• 然后用fetch()方法请求同目录下的bar.txt文件——因为文件和HTML在同一个目录，直接写文件名就行。
• 处理请求的响应，把它转换成文本格式。
• 最后把获取到的文本内容赋值给目标元素的innerHTML（或者textContent，如果不需要解析HTML的话，后者更安全）。

下面是完整的代码示例，还加了错误处理，避免文件找不到或者请求失败时出问题：

// 获取目标元素
const targetElement = document.getElementById('foo');

// 读取同目录下的bar.txt文件
fetch('bar.txt')
  .then(response => {
    // 检查请求是否成功
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    // 把响应转换成文本
    return response.text();
  })
  .then(textContent => {
    // 将文本设置到元素中
    targetElement.innerHTML = textContent;
    // 如果不需要解析HTML内容，用下面这句更安全：
    // targetElement.textContent = textContent;
  })
  .catch(error => {
    // 处理错误情况，比如文件找不到
    console.error('读取文件时出错：', error);
    targetElement.innerHTML = '无法加载内容，请检查文件是否存在';
  });

注意事项： #

• 这个方法需要在HTTP/HTTPS环境下运行，如果直接双击打开HTML文件（用file://协议），部分浏览器会因为安全限制阻止Fetch请求。这时候你可以用简单的本地服务器来测试，比如：
  • Python 3：在目录下运行python -m http.server，然后访问http://localhost:8000
  • Node.js：先安装http-server（npm install -g http-server），然后运行http-server，访问对应的地址
• 确保bar.txt文件确实和HTML文件在同一个目录，文件名拼写要完全一致（注意大小写，Linux系统下是区分大小写的）。

这样就能完美实现你想要的功能啦，不用涉及用户上传文件的逻辑，直接从服务器（或者本地服务器）读取文件内容~

备注：内容来源于stack exchange，提问作者Devalart