如何从网页HTML代码中拆分节点并提取最后3个节点

原代码的几个关键问题： #

• $.get返回的data是HTML字符串，不是DOM节点，没法直接用childNodes获取子节点
• 函数语法错误，loadpage的闭合位置混乱，导致代码结构失效
• 把节点数组直接赋值给innerHTML会输出对象字符串，不是预期的HTML
• 判断条件用了赋值=而非相等判断===

修正后的实现代码 #

function load() {
  $(document).ready(function () {
    $.get("https://example.com/index.html", function (htmlStr) {
      // 将HTML字符串转为DOM元素
      const tempContainer = document.createElement('div');
      tempContainer.innerHTML = htmlStr;
      
      // 找到main下的所有.msg节点，取最后3个
      const msgNodes = tempContainer.querySelectorAll('main .msg');
      const targetNodes = Array.from(msgNodes).slice(-3);
      
      const cont = document.getElementById("container");
      
      // 清空容器后插入目标节点
      cont.innerHTML = '';
      targetNodes.forEach(node => {
        cont.appendChild(node.cloneNode(true));
      });
    });
  });
}

load();

关键说明： #

1. 先把获取到的HTML字符串塞进临时DOM容器，这样就能用DOM选择器操作节点
2. 用querySelectorAll精准定位main下的所有.msg节点，转成数组后取最后3个
3. 直接克隆节点插入容器，比转字符串更可靠，避免HTML转义问题
4. 去掉了没必要的async函数，逻辑更清晰

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