如何使用JavaScript fetch获取内容后按ID筛选指定元素？

jQuery的load(url selector)写法本质是拿到完整响应文本后，在内存中解析DOM结构再提取匹配选择器的节点，原生JS不需要依赖jQuery，用内置的DOMParser就能实现完全一致的效果。

修正后的可直接运行代码 #

fetch("test.html")
  .then(function(response) {
    if (!response.ok) throw new Error("网络请求异常");
    return response.text();
  })
  .then(function(htmlText) {
    // 将返回的HTML字符串解析为独立的DOM文档，不会直接渲染到页面
    const parsedDoc = new DOMParser().parseFromString(htmlText, "text/html");
    // 筛选ID为container的目标元素
    const targetEl = parsedDoc.querySelector("#container");
    
    if (targetEl) {
      // 仅插入#container内部内容的写法
      lightbox.innerHTML = targetEl.innerHTML;
      
      // 如果需要连同#container标签本身、其自带属性一起插入，替换上面一行为：
      // lightbox.replaceChildren(targetEl);
    }
  })
  .catch(function(err) {
    console.error("加载失败:", err);
  });

实现说明 #

• 不推荐把返回的HTML字符串直接赋值给临时div的innerHTML再做筛选：如果返回的是完整HTML文档（包含<html>、<head>、<body>标签），浏览器会自动过滤这些顶层标签，可能出现选择器匹配失效的问题，DOMParser的解析逻辑和浏览器原生页面加载逻辑完全一致，匹配结果最稳定。
• 两种插入逻辑按需选择：只取内部内容就用目标元素的innerHTML，需要保留目标元素本身的id、样式、绑定属性等就用replaceChildren直接插入解析好的DOM节点，和jQueryload的行为完全对齐。
• 补充了请求异常、目标元素不存在的边界判断，避免运行时控制台报错。

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