Display XML content in HTML page
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?)
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/
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>
<pre lang="xml" >{{xmlString}}</pre>
This worked for me. Thanks to http://www.codeproject.com/Answers/998872/Display-XML-in-HTML-Div#answer1
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).