如何使用 jQuery ajax 在另一个页面上获取 div 的 html？答案

【问题标题】：How to get the html of a div on another page with jQuery ajax?如何使用 jQuery ajax 在另一个页面上获取 div 的 html？
【发布时间】：2020-10-07 08:24:03
【问题描述】：

我正在使用 jQuery 的 ajax 代码加载新页面，但希望他只获取 div 的 html。

我的代码： HTML：

<body>
    <div id="content"></div>
</body>

脚本：

$.ajax({
   url:href,
   type:'GET',
   success: function(data){
       $('#content').html(data);
   }
});

我希望他在另一个页面上只获取 $('div#content') 的 html。怎么做？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

好的，你应该“构造” html 并找到 .content div。

像这样：

$.ajax({
   url:href,
   type:'GET',
   success: function(data){
       $('#content').html($(data).find('#content').html());
   }
});

简单！

【讨论】：

不要这样做，这样做可能会导致脚本从另一个页面运行 - 这是一个可能不会影响您的奇怪问题，但我建议使用 .load 它将剥离脚本。阿拉var loadHolder = $('<div></div>'); loadHolder.load(href + ' #content', function(){ $('#content').loadHolder.find('#content').html()) })
这可以用javascript fetch完成吗？
我尝试这样做，我的 HTML 页面被获取与上面相同，但 $(data).find('#content') 但这 $(data)[47].innerHTML 可以。我在要获取的页面中有一个div 和id="content"。有什么线索吗？

【解决方案2】：

您可以使用 JQuery .load() 方法：

http://api.jquery.com/load/

 $( "#content" ).load( "ajax/test.html div#content" );

【讨论】：

完美！知道如何让它正确加载给定根链接/而不是相对../或绝对http://example.com/的图像吗？基本上，你怎样才能让它将图像加载到另一个站点？
@fredsbend 你不能做跨站加载，所以你必须使用相对链接。最好的办法就是使用 JavaScript 小书签。

【解决方案3】：

如果您正在寻找来自不同域的内容，这将解决问题：

$.ajax({
    url:'http://www.corsproxy.com/' +
        'en.wikipedia.org/wiki/Briarcliff_Manor,_New_York',
        type:'GET',
        success: function(data){
           $('#content').html($(data).find('#firstHeading').html());
        }
});

【讨论】：

嘿，这是荆棘崖！！ :D 我来自怀特普莱恩斯
这样做可能会导致脚本从其他页面运行 - 这是一个可能不会影响您的奇怪问题，但我建议使用 .load

【解决方案4】：

不幸的是，ajax 请求获取了整个文件，但您可以在检索到内容后对其进行过滤：

$.ajax({
   url:href,
   type:'GET',
   success: function(data) {
       var content = $('<div>').append(data).find('#content');
       $('#content').html( content );
   }
});

注意使用虚拟元素作为find() 仅适用于后代，不会找到根元素。

或者让 jQuery 为你过滤：

$('#content').load(href + ' #IDofDivToFind');

我假设这不是跨域请求，因为这不起作用，只有同一域上的页面。

【讨论】：

我一直在尝试做类似的事情几个小时，只是阅读您的回复“注意使用虚拟元素作为 find() 仅适用于后代，不会找到根元素。”极大地帮助了我。谢谢！

【解决方案5】：

$.ajax({
  url:href,
  type:'get',
  success: function(data){
   console.log($(data)); 
  }
});

这个控制台日志得到一个类似对象的数组：[meta, title, ,]，很奇怪

你可以使用JavaScript：

var doc = document.documentElement.cloneNode()
doc.innerHTML = data
$content = $(doc.querySelector('#content'))

【讨论】：