XML DOM Add Nodes
Clash Royale CLAN TAG#URR8PPP <!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
XML DOM Add Nodes
❮ Previous
Next ❯
Try it Yourself - Examples
The examples below use the XML file books.xml.
Add a node after the last child node
This example uses appendChild() to add a child node to an existing node.
Add a node before a specified child node
This example uses insertBefore() to insert a node before a specified child node.
Add a new attribute
This example uses the setAttribute() method to add a new attribute.
Add data to a text node
This example uses insertData() to insert data into an existing text node.
function w3displayXML(file,div)
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
if (this.readyState == 4 && this.status == 200)
display(this,div);
;
xhttp.open("GET", file, true);
xhttp.send();
function display(xml,div)
var x, parser, xmlDoc, txt, etxt;
try
parser = new DOMParser();
xmlDoc = parser.parseFromString(xml.responseText,"text/xml");
x = xmlDoc.documentElement;
txt = "<" + x.nodeName + ">"
level = 1;
txt += myLoop(x);
level = 0;
txt += "
</" + x.nodeName + ">"
if (xmlDoc.getElementsByTagName("parsererror").length > 0)
etxt = xmlDoc.getElementsByTagName("parsererror")[0].innerHTML;
if (etxt != undefined)
txt = xmlDoc.getElementsByTagName("parsererror")[0].innerHTML + txt;
catch(err)
txt = err.message
document.getElementById(div).innerHTML = txt;
function myLoop(x)
var i, j, y, z, txt;
txt = "";
z = x.childNodes;
for (i = 0; i < z.length; i++)
y = z[i];
if (y.nodeType == 1)
if (y.nodeName != "parsererror")
txt += "
" + makeSpace(level);
txt += "<" +
y.nodeName + "" + getAttributes(y) + ">";
level++;
txt += myLoop(y);
level--;
txt += "</" +
y.nodeName + ">";
else
if (y.nodeType == 3)
txt += y.nodeValue;
else
//txt += y.nodeType + y.nodeValue;
return txt;
function getAttributes(xml)
var i;
var txt = "";
var x = xml.attributes;
for (i = 0; i < x.length; i++)
if (x[i].name == "style") return txt;
txt += " " + x[i].name + "=" + "" +
"" + '"' + x[i].value + '"' + "";
return txt;
function makeSpace(x)
var i, txt = "";
for (i = 0; i < level; i++)
txt += " ";
return txt;
function displayXML(name)
document.getElementById('w3ModalHeading01').innerHTML = name;
document.getElementById('w3ModalContent01').innerHTML = '';
document.getElementById('w3Modal01').style.display='block';
w3displayXML(name,'w3ModalContent01');
Add a Node - appendChild()
The appendChild() method adds a child node to an existing node.
The new node is added (appended) after any existing child nodes.
Note: Use insertBefore() if the position of the node is important.
This code fragment creates an element (<edition>), and adds it after the last child of the first <book> element:
Example
newEle = xmlDoc.createElement("edition");
xmlDoc.getElementsByTagName("book")[0].appendChild(newEle);
Try it Yourself »
Example explained:
- Suppose "books.xml" is loaded into xmlDoc
- Create a new node <edition>
- Append the node to the first <book> element
This code fragment does the same as above, but the new element is added with a value:
Example
newEle = xmlDoc.createElement("edition");
newText=xmlDoc.createTextNode("first");
newEle.appendChild(newText);
xmlDoc.getElementsByTagName("book")[0].appendChild(newEle);
Try it Yourself »
Example explained:
- Suppose "books.xml" is loaded into xmlDoc
- Create a new node <edition>
- Create a new text node "first"
- Append the text node to the <edition> node
- Append the <addition> node to the <book> element
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
Insert a Node - insertBefore()
The insertBefore() method inserts a node before a specified child node.
This method is useful when the position of the added node is important:
Example
newNode = xmlDoc.createElement("book");
x = xmlDoc.documentElement;
y = xmlDoc.getElementsByTagName("book")[3];
x.insertBefore(newNode,y);
Try it Yourself »
Example explained:
- Suppose "books.xml" is loaded into xmlDoc
- Create a new element node <book>
- Insert the new node in front of the last <book> element node
If the second parameter of insertBefore() is null, the new node will be added
after the last existing child node.
x.insertBefore(newNode,null) and x.appendChild(newNode) will
both append a new child node to x.
Add a New Attribute
The setAttribute() method sets the value of an attribute.
Example
xmlDoc.getElementsByTagName('book')[0].setAttribute("edition","first");
Try it Yourself »
Example explained:
- Suppose "books.xml" has been loaded into xmlDoc
- Set the value of the attribute "edition" to "first" for the first <book> element
There is no method called add Attribute()
The setAttribute() will create a new attribute if the attribute does not exist.
Note: If the attribute already exists, the setAttribute()
method will overwrite the existing value.
Add Text to a Text Node - insertData()
The insertData() method inserts data into an existing
text node.
The insertData() method has two parameters:
- offset - Where to begin inserting characters (starts at zero)
- string - The string to insert
The following code fragment will add "Easy" to the text
node of the first
<title>
element of the loaded XML:
Example
xmlDoc.getElementsByTagName("title")[0].childNodes[0].insertData(0,"Easy ");
Try it Yourself »
❮ Previous
Next ❯