XML Applications

« Previous Chapter Next Chapter »

This chapter demonstrates some small XML applications built on XML, HTML, XML DOM and JavaScript.

Display the First CD in an HTML div Element

The Below example gets the XML data from the first CD element and displays it in an HTML element with id="showCD". The displayCD() function is called when the page is loaded:

Example

x=xmlDoc.getElementsByTagName("CD");
i=0;

function displayCD()
{
artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
txt="Artist: " + artist + "<br />Title: " + title + "<br />Year: "+ year;
document.getElementById("showCD").innerHTML=txt;
}

Navigate Between the CDs

To navigate between the CDs in the example above, add a next() and previous() function:

Example

function next()
{ // display the next CD, unless you are on the last CD
if (i<x.length-1)
  {
  i++;
  displayCD();
  }
}

function previous()
{ // displays the previous CD, unless you are on the first CD
if (i>0)
  {
  i--;
  displayCD();
  }
}

« Previous Chapter Next Chapter »
Have Any Suggestion? We Are Waiting To Hear from YOU!

Your Query was successfully sent!