XML in html div?

Question

I have put some xml-fragments in a div and retrieve it with getElementsByTagName. It works fine in Firefox but Internet Explorer ain't so nice... What should I do to fix this?

 var thumbnails = content.getElementsByTagName("thumbnails");
  for (var i = 0; i < thumbnails.length; i++) {
       thumbnails[i].innerHTML

Answer 1

IE 7 has a security issue with the innerHTML property of a DOM element. This security check silently blocks some code. It appears this may be your problem. I do not know if this is an issue with IE 8.

The fix just add the dynamically created element in the DOM tree before accessing any of the properties, not after.

However, for best practices it is wise to change the way you are doing this. Perhaps you should edit your question to ask a better way to do this.

Answer 2

You can't put arbitrary XML in an HTML document, in general. It's invalid HTML, and browser parsers may try to ‘fix’ the broken HTML, mangling your data.

You can embed XML inside HTML using <xml> data islands in IE, or using native-XHTML with custom namespaces in other browsers. But apart from the compatibility issue of the two different methods, it's just not really a very good idea.

Further, even if it worked, plain XML Element nodes don't have an innerHTML property in any case.

You could embed XML inside JavaScript:

<script type="text/javascript">
    var xml= '<nails><thumb id="foo">bar</thumb><thumb id="bof">zot</thumb></nails>';
    var doc= parseXML(xml);
    var nails= doc.getElementsByTagName('thumb');
    for (var i = 0; i<nails.length; i++) {
        alert(nails[i].getAttribute('id'));
    }

    function parseXML(s) {
        if ('DOMParser' in window) {
            return new DOMParser().parseFromString(s, 'text/xml');
        } else if ('ActiveXObject' in window) {
            var doc= new ActiveXObject('MSXML2.DOMDocument');
            doc.async= false;
            doc.loadXML(s);
            return doc;
        } else {
            alert('Browser cannot parse XML');
        }
    }
</script>

But this means you have to encode the XML as a JavaScript string literal (eg. using a JSON encoder if you are doing it dynamically). Alternatively you could use an XMLHttpRequest to fetch a standalone XML document from the server: this is more widely supported than the DOMParser/ActiveX approach.

If you are just using XML to pass data to your script, you will find it a lot easier to write JavaScript literals to do it instead of mucking about with parsing XML.

<script type="text/javascript">
    var nails= [
        {"id": "foo", "text": "bar"},
        {"id": "bof", "text": "zot"}
    ];
    for (var i = 0; i<nails.length; i++) {
        // do something
    }
</script>

Again, you can produce this kind of data structure easily using a JSON encoder if you need to do it dynamically.

Answer 3

What I've found to be the best way of doing this is to put your xml into a textarea. This is also ext-js's suggestion. That way, the browser doesn't try to create html out of your xml. When you retrieve its value, you just retrieve the texarea's value.

However, as other people have mentioned, I would suggest you retrieve the xml from the server for better separation between html and data, unless you really need to keep your http requests to a minimum.