CODEWITHSUNDEEP
javascriptxml
Robert Gould
Robert Gould

Reputation: 69815

how to display xml in javascript?

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

Upvotes: 6

Views: 72191

Answers (7)

cat
cat

Reputation: 2895

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;

Upvotes: 2

Daniel Silveira
Daniel Silveira

Reputation: 42543

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 &gt; 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.

Upvotes: 9

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

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

Upvotes: 13

Tomalak
Tomalak

Reputation: 338128

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;
}

Upvotes: 6

kdgregory
kdgregory

Reputation: 39606

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

Upvotes: 3

Andrew G. Johnson
Andrew G. Johnson

Reputation: 26993

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>

Upvotes: 8

J c
J c

Reputation: 6413

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;

Upvotes: 2

Related Questions