how to display xml in javascript?

Question

As the question says, it just escaped my memory how to display xml in javascript, I want to display some source xml within an div on a page, that sits next to the processed result of the xml in another div.

Can't remember if there was an equivalent to javascript's escape to convert entities on the client

Note: the xml files are served as is from the server, so I need a client side solution

Note: the main problem is XML doesn't render correctly in most browsers, all the brackets and attributes disappear, leaving you with text that doesn't look like xml

Answer 1

One technique would be to use two iframe elements with the src attribute set to the corresponding xml file available from the server (assuming it is exposed through a virtual directory):

<iframe src="/myapp/Document1.xml"><iframe src="/myapp/Document2.xml">

Alternatively, you could potentially use an AJAX-type request to retrieve the xml documents and then embed them in the HTML document dynamically using something like:

getElementById("myDiv").innerText = ajax.response;

Answer 2

If you want the browser to render your XML as XML, it must be in it's own document, like an iframe, or a frame. DIV won't do the job!

Besides, in the HTTP header of the request that serves the iframe you should send Content-Type: text/xml, so the Browser can understand that this content is an XML.

But, if you truely need to see it in a DIV you will have to build yourself an XML rendering function XML2HTML. You can use the HTML PRE tag for that, if your XML string is already formatted (line breaks and tabs). In that case you will have to replace < to > in the XML string.

Conclusion: The browser can't render XML and HTML in the same document. If you need it, you just have to workaround it.

Answer 3

Here's a function for you:

<script type="text/javascript">
<!--
    function xml_to_string(xml_node)
    {
        if (xml_node.xml)
            return xml_node.xml;
        else if (XMLSerializer)
        {
            var xml_serializer = new XMLSerializer();
            return xml_serializer.serializeToString(xml_node);
        }
        else
        {
            alert("ERROR: Extremely old browser");
            return "";
        }
    }

    // display in alert box
    alert(xml_to_string(my_xml));

    // display in an XHTML element
    document.getElementById("my-element").innerHTML = xml_to_string(my_xml);
-->
</script>

Answer 4

The problem is that you have to escape the characters that the HTML parser will interpret as markup: <, >, &, and in some cases " and '

Core JavaScript doesn't provide this for you, but many of the add-on libraries do.

For example, Prototype has: http://www.prototypejs.org/api/string/escapeHTML

Answer 5

When you don't want to use a whole JavaScript framework just for this...

function insertLiteral(literalString, targetElement)
{
    var textNode = document.createTextNode(literalString);
    targetElement.appendChild(textNode)
    return textNode;
}

// test it (for the example, I assume #targetDiv is there but empty)
var xmlString = "<this><is_some><xml with='attributes' /></is_some></this>";
var targetElement = document.getElementById("targetDiv");
var xmlTextNode = insertLiteral(xmlString, targetElement);

#targetDiv could be styled using CSS:

#targetDiv {
  font-family: fixed;
  white-space: pre;
}

Answer 6

Fetch your XML using Ajax and simply put the result in a textarea. Style the textarea any way you want.