How To Display Xml Data In HTML Page Using JavaScript
Last Updated : Mar 11, 2024
IN - HTML JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of how to display xml data in HTML page using JavaScript, we will learn How To Display XML Data In HTML Page Using JavaScript with the help of this illustrative article.
We will learn some very important concepts here, in the simplest and clearest way possible.
We know XML stands for Extensible Markup Language and is useful for containing and carrying data. It doesn’t do anything other than acting as a data storage agent.
We can name XML data storage tags on our own and to our convenience.
XML is used with HTML, whose task is to display what is in it’s content.
Step By Step Guide On How To Display Xml Data In HTML Page Using JavaScript :-
<!DOCTYPE html>
<html lang="en">
<head>
<title>How To Display XML Data In HTML Page Using Javascript</title>
</head>
<body>
<xml id="std" style="display: none;">
<student>
<name>Peter</name>
<surname>Thomson</surname>
<roll>6</roll>
<age>14</age>
</student>
</xml>
<p id="fname"></p>
<p id="lname"></p>
<p id="rno"></p>
<p id="ag"></p>
<script type="text/javascript">
document.getElementById("fname").innerHTML='Name: ' + document.getElementsByTagName("name")[0].firstChild.data;
document.getElementById("lname").innerHTML='Surname: ' + document.getElementsByTagName("surname")[0].firstChild.data;
document.getElementById("rno").innerHTML='Roll: ' + document.getElementsByTagName("roll")[0].firstChild.data;
document.getElementById("ag").innerHTML='Age: ' + document.getElementsByTagName("age")[0].firstChild.data;
</script>
</body>
</html>
- Firstly, we begin the HTML document by writing <!DOCTYPE html> which instructs the browser to know the version of HTML we are using.
- Secondly, we use the lang attribute of <html> tag to specify the language of the content in our HTML file. Here the content language is English as denoted by “en”.
- Third comes the <head> tag which contains information about the webpage.
- The <title> tag is a part of the <head> tag and holds the title of the webpage. This is also displayed on the browser tab.
- Now we begin with the <body> tag which contains the entire body content of our HTML page.
- We begin with the XML definition to hold data of one student only. The id attribute of <xml> tag is used to give it a referencing name, which will make it easier to look up from anywhere in the HTML document. For our purpose, we set it to “std”.
- We also set an inline styling parameter for the <xml> tag. Inline styling means we apply CSS to an element within it’s tag. The style attribute is set to “display: none;” which implies that the XML data won’t be displayed on the webpage. If this style is not set in any way, the XML data will be shown in an unformatted free flowing manner on the webpage. You can try that for fun by removing the style attribute and its value, saving the HTML file and running it in the browser! After You’re done, just re-set the property and value once again.
- We now begin a <student> tag and set the properties of the student in extremely self-explanatory ways, like <name> for student’s name, <age> for student’s age, etc. You can even define an <email> tag to store the student’s email ID. All of these details will be enclosed within the <student> tag, which is a paired or container tag, having ending tag </student>. All the details containing tags like <name>, <surname>, <roll>, <age> are paired or container tags and have respective ending tags </name>, </surname>, </roll>, </age>.
- Next you can see that we have defined four empty <p> tags with respective id’s “fname”, ”lname”, ”rno”, ”ag”, which are paragraph tags with no content. Their purpose will be clarified to You in a short while.
- Now for the action part! We begin a <script> tag with its type set as “text/javascript”, which describes the type of Javascript within the tags to contain the Javascript functionality for our HTML page.
- In the first line within the <script> tag, You can see six keywords if You read through; document, getElementById(), innerHTML, getElementsByTagName(), firstChild, data.
- The document object is a property of the Javascript window object, which represents an open browser window. Any information inside the window object is represented by a document object.
- The getElementById() is a method of the document object, which returns the element with the id specified as an input to the method. If the id is “fname”, getElementById() will return the <p> element with this id “fname”. Rings a bell?
- The innerHTML property accesses the HTML content inside an element. The actual text You see on a webpage is an innerHTML of some tag.
- The getElementsByTagName() is another method of document object which returns a list of elements with the tag name specified as an input to the method. If the input is “p”, the method will return a list of 4 <p> elements. This list is called an HTMLCollection and we can access any element of this list using indices. The first element can be accessed via document.getElementsByTagName(“p”)[0], the second element via document.getElementsByTagName(“p”)[1] and so on.
- Please note that even if we have one element with a given tag, the above method returns the output in an array form. Thus even if document.getElementsByTagName(“name”) returns one element we have to access it via document.getElementsByTagName(“name”)[0]. Its output will be <name>Peter</name>.
- The firstChild property returns the inner content of the element returned in the previous tag, in object form. For e.g the firstChild of the <name> tag accessed via document.getElementsByTagName(“name”)[0].firstChild will be “Peter”.
- Finally the data property returns us the raw data inside any child element. The raw data in the preceding step can be accessed as document.getElementsByTagName(“name”)[0].firstChild.data and will return Peter. We hope this buildup of explanations step-by-step really gave you a lot of clarity.
- Now the raw data that is obtained will be set to the inner HTML of a corresponding <p> tag with the respective id. Surprised? We told You that the purpose of the paragraph tags will be clarified in a short while. Whoo! Here we are after an exciting concept buildup!
- For e.g we will demonstrate setting the value of first <p> tag. The id of the first <p> tag is “fname”. It is accessed by document.getElementById(“fname”). Now the inner HTML of this tag, which is empty, will be set by assigning the raw data value of the <name> tag we understood in the steps 15-18. Our purpose of keeping the <p> tag empty is served. Thus the <p> tag with id=”fname” will contain Peter.
- Do You see that just after the assignment operator “=”, we see a string ‘Name: ‘ followed by a “+”? This is to join the string “Name: “ with the raw data Peter. This operation is called concatenation. The reason of this exercise is to present a formatted output containing the XML data. Remember, XML data by default is displayed in an unformatted, free-flowing manner?
- This same exercise is continued for the remaining parameters of Peter, i.e his surname, roll no and age. All Javascript statements end with a semicolon (;).
- Let us note that <html>, <head>, <body>, <title>, <xml> and its data container tags, <p>, <script> are all paired or container tags. They have respective ending tags </html>, </head>, </body>, </title>, </xml>, </p>, </script>.
Conclusion :-
I hope this tutorial on how to display xml data in HTML page using JavaScript helps you and the steps and mentioned above are easy to follow and implement.
About Anjali
