Untitled

INDEX.html

<!DOCTYPE html>

<html lang="en">

<head>

<style>

table ,td,tr,th{

border: 1px solid #000;

padding:4px;

}

</style>

<script>

var xmlDoc;

function loadXmlDoc(){

var xmlRequest = new XMLHttpRequest();

xmlRequest.onreadystatechange = function() {

if (xmlRequest.readyState == 4 && xmlRequest.status == 200) {

xmlDataFromServer(xmlRequest);

}

};

xmlRequest.open("GET", "books.xml", true);

xmlRequest.send();

}

function xmlDataFromServer(xml) {

xmlDoc = xml.responseXML;

}

function display(){

var i;

var table="<tr><th>Title</th><th>Author</th><th>Year</th><th>Price</th></tr>";

var x = xmlDoc.getElementsByTagName("book");

for (i = 0; i <x.length; i++) {

table += "<tr><td>" +

x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +

"</td><td>" +

x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue +

"</td><td>"+

x[i].getElementsByTagName("year")[0].childNodes[0].nodeValue +

"</td><td>" +

x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue +

"</td></tr>";

}

document.getElementById("books").innerHTML = table;

}

function addBook(){

let title = prompt("Enter Book Title");

let author = prompt("Enter Book Author");

let year = prompt("Enter Book Published Year");

let price = prompt("Enter Book Price");

//create new book node

let newBook=xmlDoc.createElement("book");

// create title node

let titleNode = xmlDoc.createElement("title");

titleNode.append(title);

//create author node

let authorNode = xmlDoc.createElement("author");

authorNode.append(author);

//create year node

let yearNode = xmlDoc.createElement("year");

yearNode.append(year);

//create price node

let priceNode = xmlDoc.createElement("price");

priceNode.append(price);

// finally append all childs to newbook node

newBook.appendChild(titleNode);

newBook.appendChild(authorNode);

newBook.appendChild(yearNode);

newBook.appendChild(priceNode);

// append the new book in the last

x=xmlDoc.documentElement;

x.insertBefore(newBook,null);

}

</script>

</head>

<body onload="loadXmlDoc()">

<!-- Create a paragraph with id mydata -->

<table id="books">

</table>

<input type='button' onclick='addBook()' value="Add Book"/>

<input type='button' onclick='display()' value="Display"/>

</body>]

</html>