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

 Our Business Card!
   
   

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 https://www.youtube.com/watch?v=JHiw8oB_TF4]

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

.companyName
{
    font-family: Verdana;
    font-size: 18px;
    color: red;
    display: block;
    padding: 10px;
    margin: 20px;
    background-color: ivory;
    width: 400px;
    border: 5px;
    border-color: gray;
    text-align: left;
}

.Name 
{
    display: block;
    font-weight: bold;
}

.phone 
{
    display: block;
}

.company
{
    display:block;
}

.email
{
    display: block;
    color: Green;
}

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: [email protected]
Company: Microsoft

Leave a Reply

Your email address will not be published. Required fields are marked *