Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

XML data is displayed on the HTML page


May 27, 2021 XML


Table of contents


XML to HTML

You can read the XML format file in HTML and display everything on the HTML page, which displays the label content and the label itself.

XML data is displayed on the HTML page

In the following example, we open an XML file ("cd_catalog.xml") and then traverse each CD element and display the values of the ARTIST and TITLE elements in the HTML table:

<html>
<body>

<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","cd_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
document.write("<tr><td>");
document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</td></tr>");
}
document.write("</table>");
</script>

</body>
</html>

Try it out . . .
Tips:
The information in the CDATA tag is passed to the application intact by the parser and does not resolve any control tags in that segment of the information. T he CDATA area is made up of: "Ting! The "CDATA" is marked for the beginning, with the "
Even blanks at the beginning and end of the CDATA area, as well as line-over characters, are also forwarded (note that CDATA is capital characters).

To learn more about using JavaScript and XML DOM, visit our XML DOM tutorial.