CODEWITHSUNDEEP
xmlhtml
cgvector
cgvector

Reputation: 927

How to display XML Data in DIV

I want to show XML data in DIV. My xml code is below:

<note>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body>Don’t forget me this weekend!</body>
</note>

I want it to be displayed exactly as it is in a div, with all line spacing and xml tags exactly as they are.

Is this possible?

Upvotes: 4

Views: 29617

Answers (6)

San Trần Nam
San Trần Nam

Reputation: 46

Put XML content was replaced "<" and ">" to inside pre tag to display beautiful:

<pre lang="xml">+xml_content+</pre>

Upvotes: 1

amix
amix

Reputation: 133

Should you serialize your HTML to XHTML and serve it with a Content-Type of application/xhtml+xml (which you then should do), the solution would be two-fold:

First you can create a CDATA escape section, which tells any XML or HTML parser, that do not parse in HTML5 mode (that's why it is important to serialize to XHTML and serve as application/xhtml+xml), to disregard the contents in between <![CDATA[ and ]]> completely (effectively not parsing it at all, just passing it through):

<![CDATA[ cr<'az>y text you w</>ant to display verbatim. ]]>

All this does was to let you use those special characters, which would otherwise be considered to be markup. It simply lets the text "fall through".

Second, you need to place this CDATA section within a <pre></pre> element. This will take care of keeping the formatting of your XML as is (you may also want to add a <code></code> element, which may, depending on your use case, make your code semantically more sound). Should you leave this out, then the text, you want to display, will be shown with the styling of <span> elements, that is, as plain inline text, that adheres to the flow. This is, why a simple div around it, is not enough.

Following is a snippet, that I just tested successfully. Note that I have left the indentation, as it was in my source code, to emphasize, that it will be important to take the contents, you enclose within the pre element, out of indentation and place it the way you see it here, otherwise all the empty spaces before the text will be kept at the left of each line,since the result will be the contents verbatim:

        <div>
          <pre><![CDATA[
<note>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body>Don’t forget me this weekend!</body>
</note>]]>
          </pre>
        </div>

A completely different option would be to entity-escape all those characters, which define markup. Most importantly these are < and > which would need to be expressed as &lt; and &gt; respectively. There is stand alone tools, that do this, but also some text editor plugins can do it. However, this requires an additional processing step and can complicate things. But you will still need the <pre> wrapper around your text. The positive aspect may be for some, that they wouldn't need to serialize to XHTML then.

Upvotes: 0

dcapelo
dcapelo

Reputation: 79

Depending on how cross-browser you need to be, it might suffice using the <xmp> tag or <pre><code> tags with a string representing your XML between quotes:

<div>
  <xmp>
  <Status>
    <Code>0</Code>
    <Text>Success</Text>
  </Status>
  </xmp>
</div>

<div>
  <pre><code>
  "<Status>
    <Code>0</Code>
    <Text>Success</Text>
  </Status>"
  </pre></code>
</div>

Upvotes: 2

tree
tree

Reputation: 401

I figured out a way to keep the xml original format visually to maintain white spacing & line breaks while displaying the xml tags. This should enhance the answers given here. I used the method from Tim Dev for the string replacement of xml tags to html text visible elements. Then with a class I found by Vadim Kiryukhin called vkBeautify the pre-processed xml appears as it should in a target text area.

        function addXMLToTextArea(xml) {
            var replaceArgs =  htmlEntities(xml); 
            document.getElementById('viewXML').value=vkbeautify.xml(xml, 4);
        }

        function htmlEntities(str) {
           return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
        }

Upvotes: 0

Timmetje
Timmetje

Reputation: 7694

Next to the < and > You also need to replace the double quotes and ampersands.

function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

This will do the trick.

Upvotes: 4

Philipp
Philipp

Reputation: 66

So I guess your problem is that you are trying to put the XML code into the DIV, and the browser tries to interprete the XML tags as HTML tags? You can prevent that by replacing all "<" and ">" in the XML code with the HTML special chars &gt; and &lt.

Upvotes: 5

Related Questions