如何在javascript中显示xml？

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

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

Answer 2

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 3

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 4

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 5

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 6

This is the easiest way I found to display XML as Text on the same page for copy and paste:

var xml = document.getElementById('svg_element').innerHTML;
document.getElementById('svg_pre').innerText = xml; 

Answer 7

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;