Home/ Questions/Q 817541
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T02:00:34+00:00

I’m retrieving an entire HTML document via AJAX – and that works fine. But

  • 0

I’m retrieving an entire HTML document via AJAX – and that works fine. But I need to extract certain parts of that document and do things with them.

Using a framework (jquery, mootools, etc) is not an option.

The only solution I can think of is to grab the body of the HTML document with a regex (yes, I know, terrible) ie. <body>(.*)</body> put that into the current page’s DOM in a hidden element, and work with it from there.

Is there an easier/better way?

Update

I’ve done some testing, and inserting an entire HTML document into a created element behaves a bit differently across browsers I’ve tested. For example:

  • FF3.5: keeps the contents of the HEAD and BODY tags
  • IE7 / Safari4: Only includes what’s between …
  • Opera 10.10: Keeps HEAD and everything inside it, Keeps contents of BODY

The behavior of IE7 and Safari are ideal, but different browsers are doing this differently. Since I’m loading a predetermined HTML document I think I’m going to use the regEx to grab what I want and insert it into a DOM element – unless someone has other suggestions.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Elements can exist without being in the page itself. Just dump the HTML into a dummy div.

    var wrapper = document.createElement('div');
wrapper.innerHTML = "<ul><li>foo</li><li>bar</li></ul>";
wrapper.getElementsByTagName('li').length; // 2

    Given your edits, we run into a sticky situation, since you want getElementById. The matter would probably be easy if you could just create a new virtual document via document.implementation.createDocument, but IE doesn’t support that at all.

    Using a regex is a messy business, since what if we see something like <body><input value="</body>" /></body>? You could probably just make your regex greedy so that it moves on to the last instance of </body>, but if you do end up running into troubles, a more thorough parsing may be necessary. Even if a full framework isn’t an option, you might end up wanting to use something like Sizzle, the core of libraries like jQuery, to look for the element you want. Or, if you’re really feeling in a purist sort of mood, you could write the recursive search function yourself – but why take that hit if someone else has already taken it?

    var response_el = document.createElement('html'), foo;
response_el.innerHTML = the_html_elements_content;
foo = Sizzle('#foo', response_el);
    • 0