使用jQuery 3.3.1从AJAX responseText提取指定HTML元素失败

我明白你遇到的困惑了——你尝试的几种方法都没成功，核心原因是AJAX返回的HTML结构里，目标#ajax-navigation div和两个<tr>是同级的顶级元素，而jQuery的查找方法在这里有特殊的行为：

• find()方法是用来查找元素的后代节点，它不会去搜索当前jQuery集合里的顶级元素，所以直接用$(responseText).find('#ajax-navigation')肯定找不到目标div。
• 至于filter()方法，理论上应该能筛选出集合里的顶级div，但可能因为<tr>不能单独存在，jQuery在解析HTML时自动把它们包裹进了<tbody>标签，导致你的jQuery集合里实际是<tbody>和<div>两个元素，这时候如果你的filter写法没问题应该能找到，但为了避免这种意外的自动包裹，更稳妥的方法是用临时容器统一包裹所有返回内容。

推荐解决方案：用临时容器包裹返回的HTML #

把所有零散的顶级元素塞进一个临时<div>里，这样目标div就变成了临时容器的后代，find()就能正常定位了：

var responseText = '<tr> <td> Lavender </td> </tr> <tr> <td> Lime </td> </tr> <div class="navigation mt-3 text-center" id="ajax-navigation"> Test </div>';

// 正确提取方式
var navigationContent = $('<div>').html(responseText).find('#ajax-navigation').html();
console.log(navigationContent); // 输出：Test

补充：用parseHTML的正确姿势 #

如果你想用$.parseHTML()，也可以这样做——parseHTML会把返回的HTML转换成DOM节点数组，其中<tr>会被自动包裹进<tbody>，这时候你需要用filter()筛选数组里的div元素：

var domElements = $.parseHTML(responseText);
var navigationElement = $(domElements).filter('#ajax-navigation');
console.log(navigationElement.html()); // 同样输出：Test

如果之前这个方法返回undefined，可能是你在调用时的细节问题（比如变量名错误），可以检查一下代码的拼写和执行顺序。

内容的提问来源于stack exchange，提问作者Gaylord.P