HTML从同目录外部文件加载UL列表LI元素的轻量解决方案咨询

方案1：超轻量原生JS实现（无依赖，符合轻量需求） #

这是目前成本最低的实现方式，仅需3行原生JS代码，无需引入任何外部库，外部内容文件可直接编写<li>标签，无需额外格式前缀。

操作步骤 #

1. 给你的UL元素添加自定义ID，示例：

<ul id="customList"></ul>

2. 在UL元素下方添加以下JS代码：

// 直接读取同目录的list.html内容插入到UL中
fetch('./list.html')
  .then(response => response.text())
  .then(html => document.getElementById('customList').innerHTML = html)

3. 在同目录新建list.html（也可以用.txt格式，改下fetch里的文件名即可），直接编写你需要的LI条目即可，示例内容：

<li>同事要编辑的条目1</li>
<li>同事要编辑的条目2</li>
<li>同事要编辑的条目3</li>

本地访问兼容处理 #

如果直接双击打开HTML出现跨域报错，用任意一个超轻量静态服务即可解决：

• 已安装Node.js：在当前目录终端执行npx serve，访问给出的本地地址即可
• 已安装Python：在当前目录终端执行python -m http.server，访问http://localhost:8000即可

为什么没有完全脱离JS的纯静态方案 #

纯HTML本身不具备读取本地同目录文件的能力，所有读取外部资源的逻辑都依赖浏览器提供的JS API或者服务端的渲染能力，完全不用JS的实现方案（比如PHP、SSI）反而会增加部署和使用成本，上述JS方案是目前综合成本最低的选择。

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