ansaurus

Question

Work with AJAX response with DOM methods

Answer 1

+5 A:

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);

Matchu 2010-06-03 19:42:32

I've tried this; it behaves rather oddly because I'm inserting an entire HTML document ... `<html> ... </html>`

Stomped 2010-06-03 20:01:43

@Stomped - if you *know* you'll be inserting a full HTML document, could you just create a `<html>` element, rip off the first 6 and last 7 characters, and set *that* as the `innerHTML`?

Matchu 2010-06-03 20:10:48

@Stomped - curious, I went to the jQuery source to look up how jQuery creates an element from `$('<html>whatever</html>')` to see if they had any shortcuts - turns out they just use a greedy regex to make sure it looks like `<tag>stuff</tag>`, and create a `<tag>` element and put `stuff` inside. You could use therefore either use their more generic approach, or just count on receiving a full HTML document and see above comment :)

Matchu 2010-06-03 20:16:55

Matchu: I just did the same thing (looked at jQuery source) - wish I had thought of doing so earlier. I also discovered that different browsers do things oddly when you insert an entire HTML doc (see my edit above)

Stomped 2010-06-03 20:17:14

@Stomped - edited.

Matchu 2010-06-03 20:27:32

ansaurus

tags:

views:

answers:

Work with AJAX response with DOM methods

Update

related questions