JS - XML Manipulation

<h1>XML DOM</h1>
<div>Name: <span id="name"></span></div>
<div>City: <span id="city"></span></div>
<div>Age: <span id="age"></span></div>
<p id="info"></p>

<script>
var text = '<?xml version=\"1.0\"?>';
text = text + '<data>';
text = text + '<name fname=\"lady\" lname=\"gaga\">Lady Gaga</name>';
text = text + '<city>New York</city>';
text = text + '<age>24</age>';
text = text + '</data>';

var parser = new DOMParser();
var dom = parser.parseFromString(text,'text/xml');


var hname = document.getElementById('name');
var hcity = document.getElementById('city');
var hage  = document.getElementById('age');
var info = document.getElementById('info');

// get the value of element
var xname = dom.getElementsByTagName('name')[0].childNodes[0].nodeValue;
var xcity = dom.getElementsByTagName('city')[0].childNodes[0].nodeValue;
var xage  = dom.getElementsByTagName('age')[0].childNodes[0].nodeValue;
var xroot = dom.getElementsByTagName('data')[0];

hname.innerHTML = xname;
hcity.innerHTML = xcity;
hage.innerHTML  = ''

// change the node value
xname = dom.getElementsByTagName('name')[0];
xname.childNodes[0].nodeValue = 'Indonesia';

// get the attribute
var value = xname.getAttribute('fname');

// set the attribute
xname.setAttribute('fname','luna')

// change the attribute : other style
var lname = xname.getAttributeNode('lname');
lname.nodeValue = 'maya';

// remove child
var age = dom.getElementsByTagName('age')[0];
dom.documentElement.removeChild(age);

// remove self
var city = dom.getElementsByTagName('city')[0];
//city.parentNode.removeChild(city);

// remove text node
xname = dom.getElementsByTagName('name')[0];
//temp = xname.childNodes[0];
//xname.removeChild(temp);

// clear text node
xname = dom.getElementsByTagName('name')[0];
xname.childNodes[0].nodeValue = '';

// remove attribute by node name
xname = dom.getElementsByTagName('name')[0];
xname.removeAttribute('fname');

// create a node
var album = dom.createElement('album');
xroot.appendChild(album)

// create a text node
var text = dom.createTextNode('The Monster Ball');
album.appendChild(text);

// replace child
var newNode = dom.createElement('address');
var text = dom.createTextNode('One Way Lady Gaga');
newNode.appendChild(text);
xcity = dom.getElementsByTagName('city')[0];
//xroot.replaceChild(newNode, xcity)

// create attribute
xcity = dom.getElementsByTagName('city')[0];
var state = dom.createAttribute('state');
state.nodeValue = 'Alabama';
xcity.setAttributeNode(state);

// create comments
var comm = dom.createComment('Lady Gaga Is Great');
xcity.appendChild(comm);

// create CDATA section
var cdata = dom.createCDATASection("The Monster Ball Concert");
xcity.appendChild(cdata);

// insert before
var country = dom.createElement('country');
var text = dom.createTextNode('USA');
country.appendChild(text);
var doc = dom.documentElement;
doc.insertBefore(country, album);

// append text text to text node
country.childNodes[0].insertData(3,"Hello World");

var backText = (new XMLSerializer()).serializeToString(dom);
alert(backText
</script>

JS - XML Manipulation