JavaScript XML to HTML
In this section, you will learn how to display the XML data into HTML table.
As you have already learned how to access and manipulate the DOM parser in the previous section. Here we have used the DOM reference to display the data of XML document into html table. For this, we have created XML document object and allow the DOM parser to load the "data.xml" file. Then we have created an HTML table to display the XML data. The getElementsByTagName() gets all XML Employee nodes and for each Employee node, we display data from the XML elements name and address as table data.
Following code gets the values from the XML document and display it as the table data:
document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue) |
Here is the data.xml file:
<Company> <Employee> <name>Tina</name> <address>Juhu,Mumbai</address> </Employee> <Employee> <name>Angelina</name> <address>Rohini,Delhi</address> </Employee> </Company> |
Here is the code:
<html> <h2>Display XML data in HTML</h2> <script type="text/javascript"> var xmlDoc=null; if (window.ActiveXObject){ xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); } else if (document.implementation.createDocument){ xmlDoc=document.implementation.createDocument("","",null); } else{ alert('Browser cannot handle this script'); } if (xmlDoc!=null){ xmlDoc.async=false; xmlDoc.load("data.xml"); document.write("<table border='1'>"); document.write("<tr>"); document.write("<th>"); document.write("NAME"+"<br>"); document.write("</th>"); document.write("<th>"); document.write("ADDRESS"+"<br>"); document.write("</th>"); document.write("</tr>"); var x=xmlDoc.getElementsByTagName("Employee"); for (i=0;i<x.length;i++) { document.write("<tr>"); document.write("<td>"); document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue); document.write("</td>"); document.write("<td>"); document.write(x[i].getElementsByTagName("address")[0].childNodes[0].nodeValue); document.write("</td>"); document.write("</tr>"); } document.write("</table>"); } </script> </html> |
Output will be displayed as:
Tutorials
- Clear cookie example
- JavaScript getElementById innerHTML
- JavaScript getElementById Style
- Javascript Examples
- JavaScript add row dynamically to table
- New Page 1
- JavaScript Change link
- JavaScript Checkbox getElementById
- javascript clear textarea
- JavaScript Clock Timer
- JavaScript Cookies
- JavaScript Date Difference
- JavaScript duplicate string
- JavaScript Email Validation
- javascript focus input
- JavaScript get excel file data
- JavaScript getAttribute Href
- JavaScript getAttribute Style
- JavaScript getElementById div
- JavaScript getElementById Iframe
- JavaScript getElementById select
- JavaScript Hide Button
- JavaScript Hide Div
- JavaScript hide image
- JavaScript Hide Table Column
- JavaScript Hide Table Rows
- JavaScript Key Event
- JavaScript link
- JavaScript method location
- JavaScript move div
- JavaScript move file
- JavaScript move image
- JavaScript Navigate Back
- JavaScript navigate to page
- JavaScript Navigate to URL
- JavaScript indexOf substring
- JavaScript onkeypress event
- JavaScript Open file
- JavaScript Open link in new window
- JavaScript Open Modal Window