Create XML in Javascript Create XML in Javascript xml xml

Create XML in Javascript


Disclaimer: The following answer assumes that you are using the JavaScript environment of a web browser.

JavaScript handles XML with 'XML DOM objects'.You can obtain such an object in three ways:

1. Creating a new XML DOM object

var xmlDoc = document.implementation.createDocument(null, "books");

The first argument can contain the namespace URI of the document to be created, if the document belongs to one.

Source: https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/createDocument

2. Fetching an XML file with XMLHttpRequest

var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {if (xhttp.readyState == 4 && xhttp.status == 200) {    var xmlDoc = xhttp.responseXML; //important to use responseXML here}xhttp.open("GET", "books.xml", true);xhttp.send();

3. Parsing a string containing serialized XML

var xmlString = "<root></root>";var parser = new DOMParser();var xmlDoc = parser.parseFromString(xmlString, "text/xml"); //important to use "text/xml"

When you have obtained an XML DOM object, you can use methods to manipulate it like

var node = xmlDoc.createElement("heyHo");var elements = xmlDoc.getElementsByTagName("root");elements[0].appendChild(node);

For a full reference, see http://www.w3schools.com/xml/dom_intro.asp

Note:It is important, that you don't use the methods provided by the document namespace, i. e.

var node = document.createElement("Item");

This will create HTML nodes instead of XML nodes and will result in a node with lower-case tag names. XML tag names are case-sensitive in contrast to HTML tag names.

You can serialize XML DOM objects like this:

var serializer = new XMLSerializer();var xmlString = serializer.serializeToString(xmlDoc);


Consider that we need to create the following XML document:

<?xml version="1.0"?><people>  <person first-name="eric" middle-initial="H" last-name="jung">    <address street="321 south st" city="denver" state="co" country="usa"/>    <address street="123 main st" city="arlington" state="ma" country="usa"/>  </person>  <person first-name="jed" last-name="brown">    <address street="321 north st" city="atlanta" state="ga" country="usa"/>    <address street="123 west st" city="seattle" state="wa" country="usa"/>    <address street="321 south avenue" city="denver" state="co" country="usa"/>  </person></people>

we can write the following code to generate the above XML

var doc = document.implementation.createDocument("", "", null);var peopleElem = doc.createElement("people");var personElem1 = doc.createElement("person");personElem1.setAttribute("first-name", "eric");personElem1.setAttribute("middle-initial", "h");personElem1.setAttribute("last-name", "jung");var addressElem1 = doc.createElement("address");addressElem1.setAttribute("street", "321 south st");addressElem1.setAttribute("city", "denver");addressElem1.setAttribute("state", "co");addressElem1.setAttribute("country", "usa");personElem1.appendChild(addressElem1);var addressElem2 = doc.createElement("address");addressElem2.setAttribute("street", "123 main st");addressElem2.setAttribute("city", "arlington");addressElem2.setAttribute("state", "ma");addressElem2.setAttribute("country", "usa");personElem1.appendChild(addressElem2);var personElem2 = doc.createElement("person");personElem2.setAttribute("first-name", "jed");personElem2.setAttribute("last-name", "brown");var addressElem3 = doc.createElement("address");addressElem3.setAttribute("street", "321 north st");addressElem3.setAttribute("city", "atlanta");addressElem3.setAttribute("state", "ga");addressElem3.setAttribute("country", "usa");personElem2.appendChild(addressElem3);var addressElem4 = doc.createElement("address");addressElem4.setAttribute("street", "123 west st");addressElem4.setAttribute("city", "seattle");addressElem4.setAttribute("state", "wa");addressElem4.setAttribute("country", "usa");personElem2.appendChild(addressElem4);var addressElem5 = doc.createElement("address");addressElem5.setAttribute("street", "321 south avenue");addressElem5.setAttribute("city", "denver");addressElem5.setAttribute("state", "co");addressElem5.setAttribute("country", "usa");personElem2.appendChild(addressElem5);peopleElem.appendChild(personElem1);peopleElem.appendChild(personElem2);doc.appendChild(peopleElem);

If any text need to be written between a tag we can use innerHTML property to achieve it.

Example

elem = doc.createElement("Gender")elem.innerHTML = "Male"parent_elem.appendChild(elem)

For more details please follow the below link. The above example has been explained there in more details.

https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/How_to_create_a_DOM_tree


this work for me..

var xml  = parser.parseFromString('<?xml version="1.0" encoding="utf-8"?><root></root>', "application/xml");

developer.mozilla.org/en-US/docs/Web/API/DOMParser