All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Execute XML File In HTML

Last Updated : Mar 11, 2024

How To Execute XML File In HTML

In this article we will show you the solution of how to execute xml file in HTML, let us know about XML first. XML or the eXtensible Markup Language is designed to store and transport data.

XML creates a tree-like structure with ‘roots’ and ‘leaves’. We can read and update the XML file to an HTML file using JavaScript.

Step By Step Guide On How To Execute XML File In HTML :-

At first, let us see the XML code first.

<?xml version="1.0" encoding="ISO-8859-1"?>
  <season>
    <name lang="en"> Spring </name>
    <about> Days start to get longer. Snow begins to melt as the weather gets warmer. Plants begin to grow and flowers to bloom. </about>
    <flowers>tulips</flowers>
  </season>

Now see HTML file to execute XML file,

<!DOCTYPE html>
<html lang = " en " >
<head>
    <meta charset = " UTF - 8" >
    <meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
    <meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
    <title> how to execute xml file in html </title>
    <style>
        h1 {
         font-size : larger ;
         font-weight : bolder ;
         color : rgb(113, 221, 113) ;
         text-align : center ;
        }
        h3 {
            text-align : center ;
            font-family : 'Lucida Sans' , 'Lucida Sans Regular' , 'Lucida Grande' , 'Lucida Sans Unicode' , Geneva , Verdana , sans-serif ;
        }
    </style>
</head>
<body>
    <h1> TALKERSCODE </h1>
    <h3> how to execute xml file in html </h3>
    <div class="container">
        Season Name: <span id="name"></span> <br>
        about: <span id="about"></span> <br>
        flowers: <span id="flowers"></span> <br>
    </div>
    <script>
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest() ;
        }
        else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") ;
        }
        xmlhttp.open("GET","file.xml",false) ;
        xmlhttp.send() ;
        xmlDoc = xmlhttp.responseXML ;
        document.getElementById("name").innerHTML = xmlDoc.getElementByTagName("name")[0].childNodes[0].nodeValue ;
        document.getElementById("about").innerHTML = xmlDoc.getElementByTagName("about")[0].childNodes[0].nodeValue ;
        document.getElementById("flowers").innerHTML = xmlDoc.getElementByTagName("flowers")[0].childNodes[0].nodeValue ;
    </script>
</body>
</html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now the <head> tag is used to contain information about the web page, create a <script> tag with a URL that is used to access the library of jQuery. In this tag, a <title> tag is used which helps us to specify a webpage title.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
  6. <h1> tag used to add heading here.
  7. Create a <div>, with mentioning the heading mention the id of the <span>
  8. Created the <style> tag to add CSS to the HTML page.
  9. to add JavaScript Create a <script> tag.
  10. Use the if-else statement with .XMLHttpRequest for whether the page is opened by windows or internet explorer.
  11. With xmlhttp, use the open method to access the XML file
  12. Using the send method
  13. Using all the id mentioned in <span> with doucument.getElementById() to xmlDoc.getElementByTagName(Tag)[0].childNodes[0].nodeValue

Conclusion :-

At last, here in conclusion, here we can say that with the help of this article, we are able to know how to execute XML files in HTML.

I hope this article on how to execute xml file in HTML helps you and the steps and method mentioned above are easy to follow and implement.