jquery .load() page then parse html

Question

I have used the line below in my app. But now I need to parse the html loaded before I show it. Whats the best way to get certain html elements.

$("#div").load("page.html");

Thanks

UPDATED

Now I am using this but having trouble geting the title attribute of a div with the id "div".

function get_title()
{
    $.get("test.html", function(data) {
        var data = $(data);
        var title = $("#div", data).attr("title");

        alert(title);
    });
}

The html in the var data looks like this.

<div id="div" title="title example">
<p>
    Content
</p>
<p>
    Content
</p>
</div>

Thanks again

Why do you need to parse the HTML? If you only want part of the loaded code to be on the page, use a selector in the URL parameter. — Quasipickle, Oct 04 '10 at 15:29

score 24 · Accepted Answer · edited Apr 13 '13 at 21:31

24

You can use the semi-equivalent expanded version of $.get(), like this:

$.get("page.html", function(data) {
  var data = $(data);
  //do something
  $("#div").html(data);
});

Note that calling .html(data) in this case is just a shortcut for .empty().append(data).

Or, if post-processing is an option, just use the .load() callback, like this:

$("#div").load("page.html", function() {
  $(this).find(".class").remove(); //just an example
});

edited Apr 13 '13 at 21:31

Wouter J

41,455
15
107
112

answered Oct 04 '10 at 15:21

Nick Craver

623,446
136
1,297
1,155

@Nick Craver I have used get method but cannot get the title of a div named "title". How would I do this. Thanks – moo Oct 04 '10 at 16:04
@moo - how you you mean "named"? What's the `
` tag look like?
– Nick Craver Oct 04 '10 at 16:06
@Nick Craver I have updated my 1st post. The id is "div" of the
– moo Oct 04 '10 at 16:13
@moo - To get an attribute you need to search the response, since it isn't in the main document yet, for example: `$("#div", data).attr("title");` – Nick Craver Oct 04 '10 at 16:16
@Nick Craver Thanks so far. OK i have added it and put the value into a alert for testing but im getting undefined in it :/ – moo Oct 04 '10 at 16:23
@moo - Do you have an example page we can see? Also do you *need* this before the content is loaded? My second "post-processing" option above would allow `$("#div")` to work...but you should use unique IDs, so that should differ from the element you're loading. – Nick Craver Oct 04 '10 at 16:26
@Nick Craver I have updated my 1st post and this function is called onClick. Thanks – moo Oct 04 '10 at 16:31
@moo - What does the `
` you're loading look like? Is that *all* that's in this loaded file? e.g. it's a root level element?
– Nick Craver Oct 04 '10 at 16:33
@moo - Try this: `$(data).filter("#div").attr("title");` – Nick Craver Oct 04 '10 at 16:40

score 5 · Answer 2 · answered Oct 04 '10 at 15:20

5

Instead of calling .load(), you should call $.get to perform an AJAX request and manually process the response.

answered Oct 04 '10 at 15:20

SLaks

868,454
176
1,908
1,964

score 5 · Answer 3 · answered Oct 04 '10 at 15:31

5

jQuery.ajax({
    url:'your_url',
    type:'get',
    dataType:'html',
    success:function(data)
   { 
       var _html= jQuery(data);
       //do some thing with html eg: _html.find('div').addClass('red')
       jQuery('#target').html(_html);
   }
});

answered Oct 04 '10 at 15:31

Praveen Prasad

31,561
18
73
106

jquery .load() page then parse html

3 Answers3

Linked