37

I'm using jQuery's ajax code to load new pages, but wanted him to get only the html of a div.

My codes: HTML:

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

Script:

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

I wanted him to get only the html of $('div#content') on another page. How to do it?

Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
Iago Bruno
  • 702
  • 1
  • 7
  • 15

5 Answers5

52

Ok, You should "construct" the html and find the .content div.

like this:

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

Simple!

Gustavo Costa De Oliveira
  • 7,454
  • 2
  • 22
  • 22
  • 4
    Don't do this, doing this will cause scripts to run from the other page potentially - it's a weird issue that may not affect you but I recommend using .load which will strip the scripts. Ala `var loadHolder = $('
    '); loadHolder.load(href + ' #content', function(){ $('#content').loadHolder.find('#content').html()) })`     – Shadaez Feb 01 '18 at 20:37
  • can this be done with javascript `fetch` ? – SimpleGuy Dec 11 '20 at 11:39
  • I tried to do this and my HTML page being fetched is same as above, but `$(data).find('#content')` but this `$(data)[47].innerHTML` does. I have a `div` with `id="content"` in the page being fetched. Any clue ? – SimpleGuy Dec 11 '20 at 12:39
33

You can use JQuery .load() method:

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

 $( "#content" ).load( "ajax/test.html div#content" );
nilgun
  • 10,460
  • 4
  • 46
  • 57
  • Perfect! Any idea how to get it to load images correctly that are given a root link `/` instead of relative `../` or absolute `http://example.com/`? Basically, how can you get it to load the images into another site? – user1934286 Feb 13 '18 at 22:41
  • @fredsbend You can't do cross-site loading, so you must use relative links. The best you can do is with a JavaScript bookmarklet. – aman.s Aug 23 '19 at 03:27
18

If you are looking for content from different domain this will do the trick:

$.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());
        }
});
Sinisha Mihajlovski
  • 1,811
  • 1
  • 20
  • 34
10

Unfortunately an ajax request gets the entire file, but you can filter the content once it's retrieved:

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

Note the use of a dummy element as find() only works with descendants, and won't find root elements.

or let jQuery filter it for you:

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

I'm assuming this isn't a cross domain request, as that won't work, only pages on the same domain.

adeneo
  • 312,895
  • 29
  • 395
  • 388
  • 2
    I've been trying to do something similar for hours and just reading your reply "Note the use of a dummy element as find() only works with descendants, and won't find root elements." helped me immensely. Thank you! – Oñay M. Sheard Sep 03 '20 at 13:32
3
$.ajax({
  url:href,
  type:'get',
  success: function(data){
   console.log($(data)); 
  }
});

This console log gets an array like object: [meta, title, ,], very strange

You can use JavaScript：

var doc = document.documentElement.cloneNode()
doc.innerHTML = data
$content = $(doc.querySelector('#content'))
Nebulosar
  • 1,727
  • 3
  • 20
  • 46
zangbianxuegu
  • 117
  • 4