如何在一个HTML文件中通过id访问另一个HTML文件内的元素

方案1：跳转定位（无代码依赖，实现最简单） #

如果需求是点击后跳转至file2并自动定位到对应段落，直接使用HTML原生锚点链接即可：

<!-- file1.html中的链接写法 -->
<a href="file2.html#your-paragraph-id">跳转到file2指定段落</a>

说明：#后填写的就是file2中对应段落的唯一id，跳转后浏览器会自动滚动到该段落位置，部分浏览器还会对锚点匹配元素做默认高亮提示。

方案2：不跳转，直接在file1内加载file2的指定段落 #

如果需要把file2的段落内容直接嵌入到file1页面内展示，无需跳转，可以通过JavaScript拉取解析file2的内容实现：

// file1.html中添加的JS逻辑
async function loadParagraphFromFile2(paraId, targetContainerId) {
  try {
    // 拉取file2的文本内容
    const res = await fetch('./file2.html');
    const file2Content = await res.text();
    // 将HTML文本解析为DOM对象
    const domParser = new DOMParser();
    const file2Dom = domParser.parseFromString(file2Content, 'text/html');
    // 匹配目标段落
    const targetPara = file2Dom.getElementById(paraId);
    if (targetPara) {
      // 将段落插入到file1的指定容器中
      document.getElementById(targetContainerId).appendChild(targetPara);
    }
  } catch (e) {
    console.error('加载段落失败:', e);
  }
}
// 调用示例：提取id为para5的段落，插入到file1中id为content-box的容器内
loadParagraphFromFile2('para5', 'content-box');

注意事项：

• 该方案需要在本地服务环境（如vscode的Live Server插件）下运行，直接双击打开本地HTML会触发跨域限制，无法拉取另一个本地文件
• 若file2部署在其他域名下，需要对应服务器配置跨域资源共享规则才能正常拉取

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