Can Javascript access the DOM of an Ajax text/html response?

javascript html ajax dom

21,683

Solution 1

Jquery (or other libraries??) will basically do all this for you. I highly recommend looking into this and not reinventing the wheel.

For query it would probably like:

// Make a call to url, with data 
$.ajax(
  { url: $url,
    data: $data, 
    dataType: 'xml',
    callback: function(returnData) { 
      // Jquery find <mytag attribute="foo">...</mytag> and store it in mydata
      var mydata = $(returnData).find('mytag[attribute=foo]');
      // Insert into current page to somewhere with class="after-me"
      $('.after-me').html(mydata);
   }
});

I may have the syntax wrong. But here is the docs: http://docs.jquery.com/Ajax/jQuery.ajax#options

Solution 2

Don't worry about validity, since you are doing this dynamically using javascript, you can fill hidden element's innerHTML with your response data and then use any DOM/jQuery functions you wish

Solution 3

Yes you can. Here you will find a resource for how to parse XML responses.

If you are loading it into the DOM tree that already exists (innerHTML), you should be able to call the standard DOM traversal functions you are used to.

21,683

Author by

Josh

I am Josh Gitlin, CTO and co-founder of Digital Fruition a software as a service eCommerce company. Currently serving as Principal DevOps Engineer at Pinnacle 21, and hacking away at Cinc Server, the free-as-in-beer rebranded distribution of Chef Server.

Updated on July 09, 2022

Comments

Josh almost 2 years

I'm trying to use Ajax to fetch an HTML page and then pull out a div by it's ID, and insert that DIV into the current page. So the current page loads (via Ajax) a second page, pulls the div out of the Ajax response and inserts into the current page. However I am at a loss as unless the response is text/xml, I cannot use any DOM functions on it... can I?
Josh almost 15 years

Can I load it into innerHTML if it's an entire document tree? Including <html><head><body> and everything?
jon skulski almost 15 years

You can but that will invalidate the DOM.
Jim almost 15 years

why are you loading an entire doc tree? only load specific parts. you already have a tree with the html tag; why put another one in there?
Josh almost 15 years

@George IV, that's my problem. I don't have access to the backend, I can only write Javascript code, and I am accessing one HTML page via AJAX. It's a complete page and I want a way to extract a specific part out of the Ajax response.
Josh almost 15 years

You misunderstood -- the response from the server isn't javascript. It's a complete HTML page and I want to use javascript to extract one part of that response.
Josh almost 15 years

The problem is the response returned is a complete HTML page and I only want part of that response. I am already using prototype, but I need to find a way to cast the string of HTML I receive into a DOM Document in order to traverse it.
Tolgahan Albayrak almost 15 years

well, if other page placed on the same domain, create a iframe by javascript than set its src to your page, listen iframe's load event, and you can process directly iframe's content
Josh almost 15 years

Thanks Tolgahan ALBAYRAK... I may end up going that route.
jon skulski almost 15 years

I am not sure with prototype, but in Jquery that is what $(returnData) does. It takes whatever returnData is and allows you to search/find/etc as if it was part of the page.
jon skulski almost 15 years

For example, you can pass a string: var result = $('<span><a href="link">Link</a></span>').find('a'); and result would be the DOM object <a href="link">link</a>
Josh almost 15 years

I don't understand what I was doing wrong before. This works just as you described and what jQuery is doing is creating a <div> with document.createElement, NOT inserting the div into the page, inserting the HTML into the div's innerHTML, and accessing the div's childNodes. I swear I tried this and it didn't work... but I must have been wrong because I just tried and it certainly does work.
Vinit Kadkol over 6 years

Thanks for the solution. slight update if you wish to pull a part of response data through some class or attribute. please try this out. success: function (responseHTMLData) { $($(responseHTMLData).find('.className')).each(function() { console.log($(this).attr('href')); });