Display XML content in HTML page

Question

How to display XML and other type of data in same page ?

    <?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
    <cd>
        <title>Empire Burlesque</title>
        <artist>Bob Dylan</artist>
        <country>USA</country>
        <country>Columbia</country>
        <price>10.90</price>
        <year>1985</year>
    </cd>
</catalog>

The above XML should be displayed as it is with formatting. Also , I would like to display HTML tables and other stuff in my page. How to achieve this ?

I do get XML in STRING not through file.
I do not want to parse it
I want to display (that's it)
If you say about XSLT ( please give example )
I'm thinking to use Jquery plugin ( any examples?)

mellamokb · Accepted Answer · 2011-09-22 18:29:48Z

114

Simple solution is to embed inside of a <textarea> element, which will preserve both the formatting and the angle brackets. I have also removed the border with style="border:none;" which makes the textarea invisible.

Here is a sample: http://jsfiddle.net/y9fqf/1/

answered Sep 22, 2011 at 18:29

mellamokb

56.8k12 gold badges111 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

karthi Over a year ago

Thanks for this wonderful tips and introducing me to jsfiddle.net site. Will I be able to make textarea collapse-able ? like a section ?

Sudhir Over a year ago

Awesome answer! I was able to display XML text inside a kendo-grid cell with the help of this answer and the other link here: telerik.com/forums/multiline-textarea-in-a-grid-databinding. Thanks so much!

AnirbanDebnath Over a year ago

Superb reply. Solved my problem like a charm!!

Suyash Over a year ago

Awesome and smart answer. Even worked for java problem. I was trying to create html page based on dynamic data in java.

Keombre · Accepted Answer · 2014-07-13 19:56:39Z

47

You can use the old <xmp> tag. I don't know about browser support, but it should still work.

<HTML>

your code/tables

<xmp>
    <catalog>
        <cd>
            <title>Empire Burlesque</title>
            <artist>Bob Dylan</artist>
            <country>USA</country>
            <country>Columbia</country>
            <price>10.90</price>
            <year>1985</year>
        </cd>
    </catalog>
</xmp>

Output:

your code/tables
<catalog>
    <cd>
        <title>Empire Burlesque</title>
        <artist>Bob Dylan</artist>
        <country>USA</country>
        <country>Columbia</country>
        <price>10.90</price>
        <year>1985</year>
    </cd>
</catalog>

edited Jul 13, 2014 at 19:56

answered Jul 13, 2014 at 13:47

Keombre

6436 silver badges12 bronze badges

1 Comment

Ortomala Lokni Over a year ago

"This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it." developer.mozilla.org/en/docs/Web/HTML/Element/xmp

mcsekar · Accepted Answer · 2016-02-26 09:45:54Z

31

<pre lang="xml" >{{xmlString}}</pre>

This worked for me. Thanks to http://www.codeproject.com/Answers/998872/Display-XML-in-HTML-Div#answer1

answered Feb 26, 2016 at 9:45

mcsekar

4864 silver badges13 bronze badges

2 Comments

Atta Hameed Over a year ago

This worked for me, as i was looking for something same.

JohnRDOrazio Over a year ago

worked for me too! I have been displaying xml content in a <pre> tag for quite some time without any trouble. I just recently noticed it was not longer displaying as xml, this tiny fix took care of it

Jacob · Accepted Answer · 2011-09-22 18:32:31Z

17

If you treat the content as text, not HTML, then DOM operations should cause the data to be properly encoded. Here's how you'd do it in jQuery:

$('#container').text(xmlString);

Here's how you'd do it with standard DOM methods:

document.getElementById('container')
        .appendChild(document.createTextNode(xmlString));

If you're placing the XML inside of HTML through server-side scripting, there are bound to be encoding functions to allow you to do that (if you add what your server-side technology is, we can give you specific examples of how you'd do it).

answered Sep 22, 2011 at 18:32

Jacob

79k24 gold badges159 silver badges245 bronze badges

5 Comments

karthi Over a year ago

Thanks...However, will text() preserve formatting of the XMLstring being passed ?

mellamokb Over a year ago

Where does the XML come from in the first place? Is there a way you could generate it inside of an iframe, which would take advantage of the built-in browser tools for collapsing/expanding the tags? Or do you mean you want to collapse/expand the whole textarea?

karthi Over a year ago

I want to collapse/expand the whole of textarea. In general, I want to display multiple snippets of xml code with a page. So, I would like to expand/collapse.

Jacob Over a year ago

karthi, the formatting would not be preserved if you put it in a standard div. If, however, you put it in a pre element, the whitespace is rendered as it was entered.

lucyconnuk Over a year ago

Thanks Jacob - I used $('#container').text(xmlString); with <pre id="container"></pre> and it was just what I needed.

mkirouac · Accepted Answer · 2017-06-01 16:10:51Z

0

2017 Update I guess. textarea worked fine for me using Spring, Bootstrap and a bunch of other things. Got the SOAP payload stored in a DB, read by Spring and push via Spring-MVC. xmp didn't work at all.

edited Jun 1, 2017 at 16:10

answered Jun 1, 2017 at 14:01

mkirouac

1232 silver badges13 bronze badges

Comments

ghayas · Accepted Answer · 2021-08-04 18:56:13Z

-6

A simple solution for displaying XML data on an HTML page is that: go the this website

Paste your code and generate the XML code which you can use in pre-tag in HTML to display.

answered Aug 4, 2021 at 18:56

ghayas

14 bronze badges

Collectives™ on Stack Overflow

Display XML content in HTML page

6 Answers 6

4 Comments

1 Comment

2 Comments

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

1 Comment

2 Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related