如何操作在 ajax 响应中返回的 html？答案

【问题标题】：How do I manipulate html returned in an ajax response?如何操作在 ajax 响应中返回的 html？
【发布时间】：2010-12-10 20:49:09
【问题描述】：

我已经为此搜索并尝试了很多方法，但根本无法使其正常工作。我有以下内容：

$.ajax({
    url: 'g.html',
    type: 'GET',
    dataType: 'html',
    timeout: 4000,
    cache: false,
    error: function(request, status, error){ alert('Error'); },
    success: function(html){
        alert(html);
        var newData=$('#baa', html);
        $('#result').html('Blah'+newData);
    }
});

alert(html) 输出 g.html 中包含的 html。然后，我尝试读取 id='baa' 的内容并将其移动到主文档中的 id='result' 中。我的最终目标是在其中一些数据被放置之前对其进行操作，但我无法让这个简单的版本正常工作。

g.html 看起来像这样......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Testing</title>
</head>
<body>
    <div id='baa'>
        <ul>
            <li>list 1</li>
            <li>list 2</li>
            <li>list 3</li>
        </ul>
    </div>
</body>
</html>

如果我执行 alert(html)，我会得到完整的 html 输出，如果我尝试对 newData 执行任何操作，我会得到 [object Object]。

完全被难住了，非常感谢任何帮助！

【问题讨论】：

标签： jquery

【解决方案1】：

试试……

success: function(html){
            var $html = $(html);
            $('#result').html($html.filter('#baa').html());         
         }

【讨论】：

注意 - 请参阅我对其他答案的评论，了解为什么使用 filter
这是一种享受，谢谢。有没有办法以类似的方式访问和内容？
可以获取标题文字：$html.filter('title').html()。不过，我不知道有什么好方法可以获取 head 元素。 html、head 和 body 元素被 jQuery 构造函数 $(html) 剥离，这就是为什么你需要 filter 来找到 #baa，因为 #baa 成为 @987654332 中的顶级元素@（和find 搜索内部顶级元素）。希望这是有道理的！

【解决方案2】：

试试：

var newData=$(html).find('#baa');
$('#result').html('Blah'+newData.html());

也值得一试

alert(newData.html());

...查看更多正在发生的事情（这应该会阻止[object object] 输出）。

【讨论】：

我不相信find 会在这里工作，filter 是必需的，因为#baa 是解析的 jQuery 对象中的顶级元素（请参阅我的答案中的示例）
@fearofawhackplanet - #baa 是 body 元素的子元素。
body 元素在$(html) 中不存在
@fearofawhackplanet：为什么不呢？根据问题，它存在于响应中。为什么jQuery会让它消失？