jquery html returns null

Question

I am trying to download a webpage and extract the body.

Given I have the following code:

$.ajax({
    url: someAccessiblePublicUrlOnSameWebServer,
    dataType: 'html',
    success: function (data) {
        //data is correct at this point

        var body = $(data).find('body').html();

        //body is null. why ?
    }
});

success is called and data contains the expected html but body is always null. Why ?

Is this your actual code? You're passing the empty `body` variable to `.find()`. — , Jan 11 '12 at 19:02
If `data` is an entire HTML document, you'll have issues trying to find the `` element in some browsers. — , Jan 11 '12 at 19:04
Possible duplicate of [jQuery .find("body").html() == null](https://stackoverflow.com/questions/7608159/jquery-findbody-html-null) — xhienne, Mar 09 '19 at 01:52

score 2 · Answer 1 · answered Jan 11 '12 at 18:59

2

$.ajax({
    url: someAccessiblePublicUrl,
    dataType: 'html',
    success: function (data) {
        var body = $(data).find('body').html();

    }
});

answered Jan 11 '12 at 18:59

redDevil

1,909
17
25

I fixed the typo but still same problem. – Christof Jans Jan 11 '12 at 19:15

score 1 · Answer 2 · answered Jan 11 '12 at 19:01

1

It may be that you have a typo in there.

Did you mean:

var body = $(data).find('body').html();

Note the single ticks around body.

answered Jan 11 '12 at 19:01

Dan

1,003
1
7
16

I fixed the type but still have same problem. – Christof Jans Jan 11 '12 at 19:08
Are you sure you have a tag in the result(data variable)? – Dan Jan 12 '12 at 08:48

score 1 · Answer 3 · answered Jan 12 '12 at 00:30

If you load HTML via Ajax call it will always return data as a string so you will be unable to apply normal jQuery selectors to a response. If you convert the data to $(data) you will also not be able to access body as $(data) is a collection of the contents of the body (stripped by jQuery internal clean() method). You have a few options depending on what you want to do with the result:

If you want to just append the body of the loaded html somewhere in the document you can do this:

$.get('http://your_url', function(data) {

                    $('.result').html(data);

                });

This will load just the body contents to the .result container. If you want to do any further processing you can access the selectors from there.

If you just want to manipulate the unattached fragment you can access it's elements by using filter & get.

$(data).filter('p').get() //will get all para DOM nodes
$($(data).filter("#test2").get()).text() //will get text of one specific dom node

Another option if you want to process the data in the body it might be faster to process it as XML - for XML processing look at http://think2loud.com/224-reading-xml-with-jquery/. Using your example it would be something like that:

 $.ajax({
                        url : "http://mypage",
                        dataType : 'xml', //change dataType to XML
                        success : function(data) {
                            //data is correct at this point
                            $(data).find('html').each(function() {
//here you can find whatever you want                               
a = $(this).find("body")
                                console.log(a);

                            })
                        }
                    })

score 0 · Answer 4 · answered Jan 11 '12 at 19:03

0

Unless it was a typo, you need quotes around the "body" inside your find method.

IE: var body = $(data).find('body').html();

That could be your problem.

answered Jan 11 '12 at 19:03

B. Notess

525
1
6
11

fixed the type. still having same problem. – Christof Jans Jan 11 '12 at 19:09
@ChristofJans Weird. I see the issue. I found a workaround where I use var contents = $(data).contents() var body = contents[1], of course this depends on the structure of your page xhtml. – B. Notess Jan 11 '12 at 20:24

score 0 · Answer 5 · edited May 23 '17 at 12:21

0

Correction to my last response.

Check out this thread parse html string with jquery

Using that, I think this will work

var body = $("body", $(data)).html();

edited May 23 '17 at 12:21

Community

1
1

answered Jan 11 '12 at 19:45

John F.

4,780
5
28
40

jquery html returns null

5 Answers5