Tag: innerHTML DOM XML javascript css

Display XML Data With DOM( innerHTML ): XML & Javascript

Fetch data / content from XML and display it inside the html div tags using innerHTML property of DOM.

Follow this video tutorial before proceeding: Read / Access XML Data With DOM: XML & Javascript

Only change we’re doing from previous day tutorial is to:
Call the javascript function in the body of html.
Display XML data inside DIV tags using innerHTML property of the DOM.

Business card Content
index.html

view plaincopy to clipboardprint?
  1. <title>Our Business Card!</title>  
  2.   <link rel="stylesheet" href="Style.css">  
  3.  <script language="javascript" type="text/javascript">  
  4.   
  5.  function display1() {  
  6.   
  7.   var base    = document.getElementById("myBiz");  
  8.   var person1 = base.getElementsByTagName("companyName")[0];  
  9.   var name = "Name: " + person1.getElementsByTagName("Name")[0].firstChild.data;  
  10.   var phLable1 = person1.getElementsByTagName("phone")[0].getAttribute("type") + ": ";  
  11.   var phone1 = phLable1 + person1.getElementsByTagName("phone")[0].firstChild.data;  
  12.   var phLable2 = person1.getElementsByTagName("phone")[1].getAttribute("type") + ": ";  
  13.   var phone2 = phLable2 + person1.getElementsByTagName("phone")[1].firstChild.data;  
  14.   var email = "email: " + person1.getElementsByTagName("email")[0].firstChild.data;  
  15.   var company;  
  16.  company = "Company: " + person1.getElementsByTagName("company")[0].firstChild.data;  
  17.   
  18.  document.getElementById("name").innerHTML = name;  
  19.  document.getElementById("phone1").innerHTML = phone1;  
  20.  document.getElementById("phone2").innerHTML = phone2;  
  21.  document.getElementById("email").innerHTML = email;  
  22.  document.getElementById("company").innerHTML = company;  
  23. }  
  24.   
  25. function display2() {  
  26.   
  27.  var base = document.getElementById("myBiz");  
  28.  var person1 = base.getElementsByTagName("companyName")[1];  
  29.  var name = "Name: " + person1.getElementsByTagName("Name")[0].firstChild.data;  
  30.  var phLable1 = person1.getElementsByTagName("phone")[0].getAttribute("type") + ": ";  
  31.  var phone1 = phLable1 + person1.getElementsByTagName("phone")[0].firstChild.data;  
  32.  var phLable2 = person1.getElementsByTagName("phone")[1].getAttribute("type") + ": ";  
  33.  var phone2 = phLable2 + person1.getElementsByTagName("phone")[1].firstChild.data;  
  34.  var email = "email: " + person1.getElementsByTagName("email")[0].firstChild.data;  
  35.  var company;  
  36. company = "Company: " + person1.getElementsByTagName("company")[0].firstChild.data;  
  37.   
  38.   document.getElementById("name").innerHTML = name;  
  39.   document.getElementById("phone1").innerHTML = phone1;  
  40.   document.getElementById("phone2").innerHTML = phone2;  
  41.   document.getElementById("email").innerHTML = email;  
  42.   document.getElementById("company").innerHTML = company;  
  43. }  
  44.   
  45.   
  46.  </script> <xml id="myBiz" style="display: none;"> <companynames> <companyname> <name>Satish B</name> <phone type="home" primary="call me">(91) 9844552841</phone> <phone type="work">(91) 9844119841</phone> <email>satish@technotip.org</email> <company>Technotip IT Solutions</company> </companyname> <companyname> <name>Shwetha</name> <phone type="home">(91) 123456789</phone> <phone type="work" primary="call me">(91) 987654321</phone> <email>shwetha@microsoft.com</email> <company>Microsoft</company> </companyname> </companynames> </xml><div class="companyName"><div class="Name" id="name"></div><div class="phone1" id="phone1"></div><div class="phone2" id="phone2"></div><div class="email" id="email"></div><div class="company" id="company"></div></div>   

We’re fetching the XML data using getElementById and getElementsByTagName properties and storing them in javascript variables.
Later using innerHTML property assigning the value to the DIV tags.

Video Tutorial: Display XML Data With DOM( innerHTML ): XML & Javascript



YouTube Link: https://www.youtube.com/watch?v=JHiw8oB_TF4 [Watch the Video In Full Screen.]



Also some stylesheet / CSS coding to make it look good while presenting on the browser.

Business card Styling
Style.css

view plaincopy to clipboardprint?
  1. .companyName  
  2. {  
  3.     font-family: Verdana;  
  4.     font-size: 18px;  
  5.     color: red;  
  6.     display: block;  
  7.     padding: 10px;  
  8.     margin: 20px;  
  9.     background-color: ivory;  
  10.     width: 400px;  
  11.     border: 5px;  
  12.     border-color: gray;  
  13.     text-align: left;  
  14. }  
  15.   
  16. .Name   
  17. {  
  18.     display: block;  
  19.     font-weight: bold;  
  20. }  
  21.   
  22. .phone   
  23. {  
  24.     display: block;  
  25. }  
  26.   
  27. .company  
  28. {  
  29.     display:block;  
  30. }  
  31.   
  32. .email  
  33. {  
  34.     display: block;  
  35.     color: Green;  
  36. }  

For these basic CSS, look at our Cascading Stylesheet Tutorials.

By displaying the contents on the html page we could facilitate the users to add / remove / modify the XML contents. Going forward, we would show you how to do these using some simple DOM properties.

Output on the browser
Name: Satish
home: (91) 123456789
work: (91) 987654321
email: satish@microsoft.com
Company: Microsoft