Hello folks! welcome back to a new edition of our tutorial on Xml Dom. In this tutorial, we are going to be discussing about how to create new nodes using a few methods of the document object.
These methods provides a scope to create new element node, text node, CDATA section node, comment node and attribute node. If the newly created node already exists in the element object, it is replaced by the new one. The following sections illustrates this with examples.
These methods provides a scope to create new element node, text node, CDATA section node, comment node and attribute node. If the newly created node already exists in the element object, it is replaced by the new one. The following sections illustrates this with examples.
Create new Element node
The createElement() method creates a new element node. If the newly created element node exists in the element object, then it is replaced by the new one.
Syntax
The following below is the syntax to use the createElement() method -
var_name = xmldoc.createElement("tagname"); Where,
- var_name - is the user-defined variable name which holds the name of new element.
- ("tagname") - is the name of new element node to be created.
Example
The below example is used to parse an xml document (node.xml) into XML DOM object, and creates a new element node PhoneNo in the XML document -
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
xmlDoc = loadXMLDoc("/dom/node.xml");
new_element = xmlDoc.createElement("PhoneNo");
x = xmlDoc.getElementsByTagName("FirstName")[0];
x.appendChild(new_element);
document.write(x.getElementsByTagName("PhoneNo")[0].nodeName);
- new_element = xmlDoc.createElement("PhoneNo"); creates the new element node
.
- x.appendChild(new_element); x holds the name of the specified child node
to which the new element node is appended.
Output
Save file as createnewelement_example.html on the server's path (this file and node.xml should be on the same path in your server). The output of the above example gives us the attribute value as PhoneNo.
READ: XML DOM | Traversing
Create new Text node
The createTextNode() method creates a new text node.
Syntax
The following below is the syntax to use the createTextNode() method -
var_name = xmldoc.createTextNode("tagname"); Where,
- var_name - is the user-defined variable name which holds the name of new text node.
- ("tagname") - is the name of new text node to be created.
Example
The below example is used to parse an xml document (node.xml) into XML DOM object, and then create a new text node in the XML document -
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
xmlDoc = loadXMLDoc("/dom/node.xml");
create_e = xmlDoc.createElement("PhoneNo");
create_t = xmlDoc.createTextNode("Im new text node");
create_e.appendChild(create_t);
x = xmlDoc.getElementsByTagName("Employee")[0];
x.appendChild(create_e);
document.write(" PhoneNO: ");
document.write(x.getElementsByTagName("PhoneNo")[0].childNodes[0].nodeValue);
- create_e = xmlDoc.createElement("PhoneNo"); creates the new element node
.
- create_t = xmlDoc.createTextNode("Im new text node") creates a new text node.
- x.appendChild(create_e); the text node, "Im new text node" is appended to the element
.
- document.write(x.getElementByTagName("PhoneNo")[0].childNodes[0].nodeValue); writes the new text node value to the element
Output
Save file as createtextnode_example.html on the server's path (this file and node.xml should be on the same path in your server). The output of the above example gives us the attribute value, i.e, PhoneNo: Im new text node.
READ: XML DOM | Get Node
Create new Comment node
The createComment() method create a new comment node. Comment node is included in the program for the easy understanding of the code functionality.
Syntax
The following below is the syntax to use the createComment() method -
var_name = xmldoc.createComment("tagname"); Where,
- var_name - is the user-defined variable name which holds the name of new comment node.
- ("tagname") - is the name of new comment node to be created.
Example
The below example is used to parse an xml document (node.xml) into XML DOM object, and create a new comment node, "Company is the parent node" in the XML document -
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
xmlDoc = loadXMLDoc("/dom/node.xml");
create_comment = xmlDoc.createComment("Company is the parent node");
x = xmlDoc.getElementsByTagName("Company")[0];
x.appendChild(create_comment);
document.write(x.lastChild.nodeValue);
- create_comment = xmlDoc.createComment("Company is the parent node") creates a specified comment line.
- x.appendChild(create_comment); In this line, 'x' holds the name of the element
to which the comment line is appended.
Output
Save file as createcommentnode_example.html on the server's path (this file and node.xml should be on the same path in your server). The output of the above example gives us the attribute value as Company is the parent node.
Create New CDATA Section Node
The createCDATASection() method is used to create a new CDATA section node. If the newly created CDATA section node exists in the element object, it is replaced by the new one.
Syntax
The following below is the syntax to use the createCDATASection() method -
var_name = xmldoc.createCDATASection("tagname"); Where,
- var_name - is the user-defined variable name which holds the name of new CDATA section node.
- ("tagname") - is the name of new CDATA section node to be created.
Example
The below example is used to parse an xml document (node.xml) into XML DOM object, and creates a new CDATA section "Create CDATA Example" in the XML document -
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
}
else // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
xmlDoc = loadXMLDoc("/dom/node.xml");
create_CDATA = xmlDoc.createCDATASection("Create CDATA Example");
x = xmlDoc.getElementsByTagName("Employee")[0];
x.appendChild(create_CDATA);
document.write(x.lastChild.nodeValue);
- create_CDATA = xmlDoc.createCDATASection("Create CDATA Example") creates a new CDATA section node, "Create CDATA Example".
- x.appendChild(create_CDATA); In this line, 'x' holds the specified element
indexed at 0 to which the CDATA node value is appended.
Output
Save file as createcdatanode_example.html on the server's path (this file and node.xml should be on the same path in your server). The output of the above example gives us the attribute value as Create CDATA Example.
READ: XML DOM | Accessing
Create new Attribute node
The setAttributeNode() method is used for creating a new attribute node. If the newly created attribute node exists in the element object, it is replaced by the new one.
Syntax
The following below is the syntax to use the createAttributeNode() method -
var_name = xmldoc.createAttributeNode("tagname"); Where,
- var_name - is the user-defined variable name which holds the name of new attribute node.
- ("tagname") - is the name of new attribute node to be created.
Example
The below example is used to parse an xml document (node.xml) into XML DOM object, and creates a new attribute node section in the XML document -
function loadXMLDoc(filename) {
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else // code for IE5 and IE6 {
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
xmlDoc = loadXMLDoc("/dom/node.xml");
create_a = xmlDoc.createAttribute("section");
create_a.nodeValue = "A";
x = xmlDoc.getElementsByTagName("Employee");
x[0].setAttributeNode(create_a);
document.write("New Attribute: ");
document.write(x[0].getAttribute("section"));
- create_a = xmlDoc.createAttribute("Category") creates an attribute with the name
.
- create_a.nodeValue="Management" creates the value "A" for the attribute
- x[0].setAttributeNode(create_a); this attribute value is set to the node element
indexed at 0.
READ: XML DOM | Set Node
Alright guys! This is where we are going to be rounding up for this tutorial post. In our next tutorial, we are going to be discussing about XML DOM Add Node.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
