Display XML content in HTML page
JqueryHtmlXmlJquery Problem Overview
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?)
Jquery Solutions
Solution 1 - Jquery
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/
Solution 2 - Jquery
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>
Solution 3 - Jquery
<pre lang="xml" >{{xmlString}}</pre>
This worked for me. Thanks to http://www.codeproject.com/Answers/998872/Display-XML-in-HTML-Div#answer1
Solution 4 - Jquery
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).
Solution 5 - Jquery
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.
Solution 6 - Jquery
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.