XML DOM Create Nodes

To create a new element node, we can use the createElement() method.

Books.xml:

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
 
  <book category="Child">
    <title lang="en">ABC</title>
    <author>Author Name</author>
    <year>2020</year>
    <price>29.99</price>
  </book>
 
  <book category="Internet">
    <title lang="en">Basics</title>
    <author>Author 1</author>
    <author>Author 2</author>
 
 <year>2005</year>
    <price>49.99</price>
  </book>
 
</bookstore>

Example:

<!DOCTYPE html>
<html>
<body>
 
<p id="hello"></p>
 
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
 
function myFunction(xml) {
    var x, y, i, newElement, txt, xmlDoc;
    xmlDoc = xml.responseXML;
    newElement = xmlDoc.createElement("publisher");
    x = xmlDoc.getElementsByTagName("book")[0]
    x.appendChild(newElement);
 
   // Display all elements
    xlen = x.childNodes.length;
    y = x.firstChild;
    txt = "";
    for (i = 0; i < xlen; i++) {
        if (y.nodeType == 1) {
            txt += y.nodeName + "<br>";
        }
        y = y.nextSibling;
    }
    document.getElementById("hello").innerHTML = txt;
}
</script>
 
</body>
</html>

Output:

Explanation:

In the above example, we are loading “books.xml” in the xmlDoc. We will then create a new element node <publisher> to append it to the first <book> element.

Example: To loop through and to add an element to all <book> elements:

<!DOCTYPE html>
<html>
<body>
 
<p id="hello"></p>
 
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
 
function myFunction(xml) {
    var x, y, z, i, xLen, yLen, newEle, newText, xmlDoc, txt;
    xmlDoc = xml.responseXML;
    txt = "";
    x = xmlDoc.getElementsByTagName("book");
    xLen = x.length;
    for (i = 0; i < xLen; i++) { 
        newEle = xmlDoc.createElement("publisher");
        newText = xmlDoc.createTextNode("Publisher Name");
        newEle.appendChild(newText);
        x[i].appendChild(newEle);
    }
    // Output all titles and editions
    y = xmlDoc.getElementsByTagName("title");
    yLen = y.length
    z = xmlDoc.getElementsByTagName("publisher");
    for (i = 0; i < yLen; i++) { 
        txt +=  
        " Publisher: " + 
        z[i].childNodes[0].nodeValue + "<br>";
    }
    document.getElementById("hello").innerHTML = txt; 
}
</script>
 
</body>
</html>

Output:

Create a New Attribute Node:

A new attribute node is created using the createAttribute() method. In case there is already an attribute existing with the same name then it will be replaced by the new one.

Example:

<!DOCTYPE html>
<html>
<body>
 
<p id="hello"></p>
 
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
 
function myFunction(xml) {
    var x, newatt, xmlDoc;
    xmlDoc = xml.responseXML;
    newatt = xmlDoc.createAttribute("publisher");
    newatt.nodeValue = "Publisher Name";
    x = xmlDoc.getElementsByTagName("title");
    x[0].setAttributeNode(newatt);
    document.getElementById("hello").innerHTML =
    "Publisher: " + x[0].getAttribute("publisher");
}
</script>
 
</body>
</html>

Output:

Explanation:

In the above example, we are loading “books.xml” in the xmlDoc. We will then create a new attribute node <publisher> and will set its value to “Publisher Name”. This new attribute node is added to the first <title> element.

Example: To loop through all <title> elements and to add a new attribute node:

<!DOCTYPE html>
<html>
<body>
 
<p id="hello"></p>
 
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
 
function myFunction(xml) {
    var x, y, z, i, xLen, newAtt, xmlDoc, txt;
    xmlDoc = xml.responseXML;
    x = xmlDoc.getElementsByTagName('book');
    xLen = x.length;
    for (i = 0; i < xLen; i++) { 
        newAtt = xmlDoc.createAttribute("publisher");
        newAtt.value = "Publisher Name";
        x[i].setAttributeNode(newAtt);
    }
    // Output all "edition" attribute values    
    txt = "";
    for (i = 0; i < x.length; i++) { 
        txt += "Publisher: " + x[i].getAttribute("publisher") + "<br>";
    }
    document.getElementById("hello").innerHTML = txt; 
}
</script>
 
</body>
</html>

Output:

Create an Attribute Using the setAttribute() method:

To create a new attribute, if it is not existing already, the setAttribute() method is used.

Example:

<!DOCTYPE html>
<html>
<body>
 
<p id="hello"></p>
 
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
 
function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    var x = xmlDoc.getElementsByTagName("title");
    x[0].setAttribute("publisher", "Publisher Name");
    document.getElementById("hello").innerHTML =
    "Publisher: " + x[0].getAttribute("publisher");
}
</script>
</body>
</html>

Output:

Explanation:

In the above example, we are loading “books.xml” in the xmlDoc. We will then set the attribute “publisher” value to “Publisher Name” for the first <book> element.

Example: To loop through all <title> elements and to add a new attribute node:

<!DOCTYPE html>
<html>
<body>
 
<p id="hello"></p>
 
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
 
function myFunction(xml) {
    var x, i, xmlDoc, txt;
    xmlDoc = xml.responseXML;
    x = xmlDoc.getElementsByTagName("title");
    // Add a new attribute to each title element
    for(i = 0; i < x.length; i++) {
        x[i].setAttribute("publisher", "Publisher Name");
    }
    // Output title and edition value
    txt = "";
    for (i = 0; i <x.length; i++) {
        txt += 
        " Publisher: " +
        x[i].getAttribute("publisher") + "<br>";
    }
    document.getElementById("hello").innerHTML = txt;
}
</script>
</body>
</html>

Output:

Create a Text Node:

We can create a new text node using the createTextNode() method.

Example:

<!DOCTYPE html>
<html>
<body>
 
<p id="hello"></p>
 
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
 
function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    var x, y, i, newEle, newText, txt;
 
    // add an edition element
    newEle = xmlDoc.createElement("publisher");
    newText = xmlDoc.createTextNode("Publisher Name");
    newEle.appendChild(newText);
    x = xmlDoc.getElementsByTagName("book")[0];
    x.appendChild(newEle);
 
    // display all elements
    xlen = x.childNodes.length;
    y = x.firstChild;
    txt = "";
    for (i = 0; i < xlen; i++) {
        if (y.nodeType == 1) {
            txt += y.nodeName + "<br>";
        }
    y = y.nextSibling;
    }
    document.getElementById("hello").innerHTML = txt;
}
</script>
 
</body>
</html>

Output:

Explanation:

In the above example, we are loading “books.xml” in the xmlDoc. We will then create a new element node <publisher> and a new text node with the text “first”. The final step is to append the new text node to the element node and the new element node to the first <book> element.

Example: To add an element node, with a text node, to all <book> elements:

<!DOCTYPE html>
<html>
<body>
 
<p id="hello"></p>
 
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
 
function myFunction(xml) {
    var x, y, z, i, xLen, yLen, newEle, newText, xmlDoc, txt;
    xmlDoc = xml.responseXML;
    txt = "";
    x = xmlDoc.getElementsByTagName("book");
    xLen = x.length;
    for (i = 0; i < xLen; i++) { 
        newEle = xmlDoc.createElement("publisher");
        newText = xmlDoc.createTextNode("Publisher Name");
        newEle.appendChild(newText);
        x[i].appendChild(newEle);
    }
    // Output all titles and editions
    y = xmlDoc.getElementsByTagName("title");
    yLen = y.length
    z = xmlDoc.getElementsByTagName("publisher");
    for (i = 0; i < yLen; i++) { 
        txt +=  
        " Publisher: " + 
        z[i].childNodes[0].nodeValue + "<br>";
    }
    document.getElementById("hello").innerHTML = txt; 
}
</script>
 
</body>
</html>

Output:

Create a CDATA Section Node:

To create a new CDATA section node, the createCDATASection() method is used.

Example:

<!DOCTYPE html>
<html>
<body>
 
<p id="hello"></p>
 
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
 
function myFunction(xml) {
    var x, newCDATA, xmlDoc;
    xmlDoc = xml.responseXML;
    newCDATA = xmlDoc.createCDATASection("SALE SALE SALE");
    x = xmlDoc.getElementsByTagName("book")[0];
    x.appendChild(newCDATA);
    document.getElementById("hello").innerHTML = x.lastChild.nodeValue;
}
</script>
 
</body>
</html>

Output:

Explanation:

In the above example, we are loading “books.xml” in the xmlDoc. We will then create a new CDATA section node to append it to the first <book> element.

Example: To loop through, and to add a CDATA section, to all <book> elements:

<!DOCTYPE html>
<html>
<body>
 
<p id="hello"></p>
 
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
 
function myFunction(xml) {
    var x, i, xLen, newCDATA, newtext, xmlDoc, txt;
    xmlDoc = xml.responseXML;
    txt = "";
    x = xmlDoc.getElementsByTagName("book");
    xLen = x.length;
    newtext = "SALE SALE SALE";
    for (i = 0; i < xLen; i++) { 
        newCDATA = xmlDoc.createCDATASection(newtext);
        x[i].appendChild(newCDATA);
    }
    for (i = 0; i < xLen; i++) { 
        txt += x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue + 
        " - " + x[i].lastChild.nodeValue + "<br>";
    }
    document.getElementById("hello").innerHTML = txt; 
}
</script>
 
</body>
</html>

Output:

Create a Comment Node:

We can use the createComment() method to create a new comment node.

Example:

<!DOCTYPE html>
<html>
<body>
 
<p id="hello"></p>
 
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
 
function myFunction(xml) {
    var x, newComment, xmlDoc;
    xmlDoc = xml.responseXML;
    newComment = xmlDoc.createComment("New Edition");
    x = xmlDoc.getElementsByTagName("book")[1];
    x.appendChild(newComment);
    document.getElementById("hello").innerHTML = x.lastChild.nodeValue;
}
</script>
 
</body>
</html>

Output:

Explanation:

In the above example, we are loading “books.xml” in the xmlDoc. We will then create a new comment node to append it to the first <book> element.

Example: To loop through, and to add a comment node, to all <book> elements:

<!DOCTYPE html>
<html>
<body>
 
<p id="hello"></p>
 
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
 
function myFunction(xml) {
    var x, i, xLen, newComment, xmlDoc, txt;
    xmlDoc = xml.responseXML;
    txt = "";
    x = xmlDoc.getElementsByTagName("book");
    xLen = x.length
    for (i = 0; i < xLen; i++) { 
        newComment = xmlDoc.createComment("New Edition");
        x[i].appendChild(newComment);
    }
    for (i = 0; i < xLen; i++) { 
        txt +=  
        " - " + x[i].lastChild.nodeValue + "<br>";
    }
    document.getElementById("hello").innerHTML = txt; 
}
</script>
 
</body>
</html>

Output:

Please Share