javascript - "getElementById not a function" when trying to parse an AJAX response?

Question

I'm running GM_xmlhttpRequest (in a Greasemonkey script) and storing the responseText into a newly created HTML element:

var responseHTML = document.createElement('HTML');
...
onload: function() { responseHTML.innerHTML = response.responseText; }

And then I am trying to find an element in responseHTML:

console.log(responseHTML.getElementsByTagName('div'));
console.log(responseHTML.getElementById('result_0'));

The first works fine, but not the second. Any ideas?

Answer 1

Use DOMParser() to convert responseText into a searchable DOM tree.
Also, your attempts to search/use anything derived from responseText, must occur inside the onload function.

Use code like this:

GM_xmlhttpRequest ( {
    ...
    onload:     parseAJAX_ResponseHTML,
    ...
} );

function parseAJAX_ResponseHTML (respObject) {
    var parser      = new DOMParser ();
    var responseDoc = parser.parseFromString (respObject.responseText, "text/html");

    console.log (responseDoc.getElementsByTagName('div'));
    console.log (responseDoc.getElementById('result_0'));
}

Of course, also verify that a node with id result_0 is actually in the returned HTML. (Using Firebug, Wireshark, etc.)