Parse complete html page with jquery

Question

I load a html with ajax. I want to load the result in a jquery object. I tried that but it returns null. How can I do this? I got a complete page including doctype, head elements and body elements.

var test = $(result); //result contains html code
alert(test.html()); //returns null

I load the data with this function.

function ajaxLoadContent(element) {
    $.ajax({
        url: "url to the page",
        type: "GET",
        timeout: 5000,
        datattype: "html",
        success: function(result) {
        //handler
        },
    });
    return false;

Can you show how you get the data into `result`? Also, does `alert(result);` show the html in the alert? Just dumping html into a variable like that doesn't automatically make the .html() function return html. your result variable may already be html. — Josh, Dec 13 '10 at 14:41
@Josh, added the function that call the page to the post. Yes the html is shown in the alert when i do `alert(result)`. — Mark Baijens, Dec 13 '10 at 14:50
@WaiLam I want to do some modification before i use the html on my page. — Mark Baijens, Dec 13 '10 at 14:51

score 56 · Accepted Answer · edited Aug 27 '15 at 12:44

56

It's a while ago, but maybe you're still interested in it..

The intern implementation of $(String) is not able to build an jQuery object that contains head or body tags. It will simply ignore them and move all elements inside on level up.

So if your string is for example

<html>
  <head>
    <meta ...>
  </head>
  <body>
    <div id="a"/>
  </body>
</html>

the resulting jQuery object will be an array of two elements

[<meta ...>, <div id="a" />]

to get a body-like jQuery object cut everything but the body content before passing it to jQuery:

body = '<div id="body-mock">' + html.replace(/^[\s\S]*<body.*?>|<\/body>[\s\S]*$/ig, '') + '</div>';
var $body = $(body);

now things work as expected.. for example

$body.find('#a')

Hope that helps..

edited Aug 27 '15 at 12:44

sp00m

47,968
31
142
252

answered Oct 11 '12 at 21:29

lrsjng

2,615
1
19
23

3

why has this answer not been accepted? Save me from a lot of headache. Thanks! – Xaver Nov 07 '14 at 16:34
3

why can't jquery parse the head and body? – nbrustein Feb 01 '16 at 21:46
Livesaver! Thank you!! – Gray Spectrum Sep 20 '19 at 14:49

score 2 · Answer 2 · answered Dec 13 '10 at 14:40

2

test is just an html string, so you could simply do this to show the contents

alert(result);

and if you want to bind that to an element

$("#myDiv").html(result);

answered Dec 13 '10 at 14:40

hunter

62,308
19
113
113

I want to be able to use some jquery functionality on the return value. – Mark Baijens Dec 13 '10 at 14:52
1

since result is just a string you will probably need to place it on the page before you can interact with it with jQuery. – hunter Dec 13 '10 at 14:56
Mzz than I need to place it in an hidden iframe I guess. That would be nasty. Probably better to design some out of the box solution. – Mark Baijens Dec 13 '10 at 15:00
Are you trying to load html and totally overwrite the html on the page? If so, why don't you just navigate to that page? ;) – hunter Dec 13 '10 at 15:17
Let me know exactly what you want to do with the HTML once it comes back and I might be able to help you out – hunter Dec 13 '10 at 15:18
Well i'm using Ajax for some of my functionality. I got a non JavaScript backup to support non JavaScript users as well. Both call the same url because I don't want to change my content twice when modifications are made. I guess best thing to do is to change my server side code that detects if this is a ajax call or not and modify the return value based on that. – Mark Baijens Dec 13 '10 at 15:24

score 1 · Answer 3 · answered Dec 13 '10 at 17:27

1

function ajaxLoadContent(element) {
$.ajax({
    url: "url to the page",
    type: "GET",
    timeout: 5000,
    datattype: "html",
    success: function(data) {
     var result = $(data);
    },
});
return false;

You should now be able to call the result like this (remember it's not added to the DOM yet):

alert(result.html());

Add to the DOM

result.appendTo("body");

Let me know if this works for you.

answered Dec 13 '10 at 17:27

halfpastfour.am

5,764
3
44
61

1

No that doesn't work since the html i get contains head,body tags and even a doctype. – Mark Baijens Dec 14 '10 at 22:08
ok change it to: var result = data; $("html").html(result); Let me know if it works? – halfpastfour.am Dec 16 '10 at 19:16
I to have access to head elements aswell. This work's but only for body elements and the title element. – Mark Baijens Dec 17 '10 at 17:41

score -1 · Answer 4 · answered Dec 13 '10 at 14:58

-1

Try the load method of jQuery object: http://api.jquery.com/load/

Load data from the server and place the returned HTML into the matched element.

answered Dec 13 '10 at 14:58

pawel

35,827
7
56
53

The author of this answer might be onto something. Converting the whole HTML string to a `data:` url and calling $.ajax() on it might just be the ONLY reliable method. – Szczepan Hołyszewski Oct 11 '17 at 23:44

Parse complete html page with jquery

4 Answers4

Linked