Question

I have a page that is getting an XML document in order to add a form to the page.
My XML structure is, simplified as much as possible, along these lines:

<root><someXMLElement><input type="text"></input></someXMLElement></root>

I can get the xml string without any problems, and this all works fine in Chrome, FireFox, IE10 but when I open the page in IE8 on another machine or IE10 compatibility view, my XML is being transformed to an unusable state, like so:

<DIV><INPUT type=text></INPUT/></HOFCDHIDDENINPUTS/></ROOT/></DIV>

I was originally getting my XML response and trying to dynamically handle parsing through it without placing it first in the DOM of my document, along the lines of :

var xml = http.responseText;
var xmlElements = $(xml).filter("root").html();
...do work on xmlElements 

but neither $(xml).filter or $(xml).find returned any value in IE8. This seemed rather similar to:
jQuery .find() doesn't return data in IE but does in Firefox and Chrome
however this problem persists even when I write my xml inline without using ajax, and simply trying to use the jQuery ParseXML or an ActiveX parser did nothing to solve the issue. The parsed XML still returned nothing from find().
I have read in several places about IE8 woes surrounding innerHTML, so I opted for an alternate solution to a dynamic DOM in a variable. Instead, I created an element using document.createElement, added my response to this element’s innerHTML, and then appended this to the document itself, along the same lines as http://domscripting.com/blog/display/99, with a simplified version of my code being as follows:

$(document).ready(function () {
            var XMLContainer = document.createElement("div");
            XMLContainer.innerHTML
= "<root><someXMLElement><input type=\"text\"></input></hofcdhiddeninputs></root>"
            document.body.appendChild(XMLContainer);
            var DOMAccessibleXML = $("body").find("root").html();

or
var DomAccessibleXML = document.body.getElementsByTagName[0].innerHtml
});

I also tried using innerText, as well as creating the element with jQuery and using the append() function. The result was the same all around. My XML was added to the element on my page, however it was transformed at some point in the append to look like:

This simple XML isn’t too badly damaged, but even here it adds forward slashes to the end of every element. In some cases it would leave elements out entirely (in the case of empty elements) or simply delete the opening tag (no idea). The fact that this happens with or without jQuery and only in IE8 leads me to believe that it is happening during the append. As a side note, if you alert the above DomAccessibleXML, it comes up blank, showing my prior issue.

So, what I need is the ability to traverse and manipulate the DOM of an XML document using javascript and jQuery if possible. If the solution is to add teh XML to the page at hand first, I need a way to not have IE8 mangle it. If the solution is to create a dynamic DOM I need a way to have jQuery find() get results, or an alternate method of retrieving values without jQuery find or filter.

Thanks very much for your consideration.

Edit 1: Windows 7, IE8.0.7601, IIS 7.5.7600, issue present in jQuery 1.8.0 and 1.5.2

Edit 2: I can get the XML to parse now by adding an xml declaration to my example code, but I still cant access innerHTML or getElementsByTagName. In the code below, xmlDoc.documentElement.xml returns the correct string, while xmlDoc.documentElement.getElementsByTagName(“root”).length returns 0. At this point, I believe I could accomplish this in pure DOM manipulation avoiding innerHTML, but I would very much prefer to not rewrite everything with this constraint.

var XMLContainer = document.createElement("div");
            var XMLContainer = "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?><root><someXMLElement><input type=\"text\">text</input></someXMLElement></root>";
            var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async = false;
            xmlDoc.loadXML(XMLContainer);
            alert(xmlDoc.documentElement.xml);
            alert(xmlDoc.documentElement.getElementsByTagName("root").length);

edit 3: doh! documentElement refers to root. getElementsByTagName(‘someXMLElement’) works as expected. If I can get my larger document to parse this should work, but innerHTML issues aside I would still like to know why IE8 mangles the elements on append. Any thoughts?

Answer 1

XML documents are not HTML documents. Do not try to append XML nodes into an HTML document; it won’t work unless the XML elements just happen to correspond to a valid HTML structure with respect to the element names and their hierarchy, which yours does in part, but only in part.

You should be able to manipulate the XML directly with jQuery however. Just say,

var jQueryXmlObject = $($.parseXML("<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?><root><someXMLElement><input type=\"text\">text</input></someXMLElement></root>"));

And you’ve got a jQuery object on which you can use .find() or whatever to your heart’s content. But note that .filter('root') still won’t work – this is because the jQuery object refers to the document, not the root element. .filter does not search the DOM, it only reduces the set of “matched elements” in a jQuery object, which is not applicable here.