The Element interface represents an element of an XML document. It contains attributes, elements and text. The attributes belong to attribute node and text belong to text node. The element basically has at least one text node.

An element can have another element, text, comment, PI, CDATASection, Entity Reference, etc as children. The node type value of the Element node is 1.

Since element is a node, it can have all properties and methods of node such as:

attributes, baseURI, childNodes, firstChild, lastChild, nodeType, nodeName, previousSibling, appendChild(), cloneNode(), hasAttribute, getElementsByTagName(), getElementsByTagNameNS()…etc.

 Description of few methods and attributes are given below:

getAttribute()

The getAttribute method returns attribute value by name.

Syntax for getAttribute method

elementNode.getAttribute(name);

getAttributeNode()

The getAttributeNode method returns attribute node by name from current element.

Syntax for getAttributeNode method

elementNode.getAttributeNode(name);

removeAttribute()

The removeAttribute method removes the attribute with specified name.

Syntax for removeAttribute method

elementNode.removeAttribute(name);

hasAttribute()

The hasAttribute method return true if current element node has attribute specified by name.

Syntax for hasAttribute method

elementNode.hasAttribute(name);

removeAttributeNode()

The removeAttributeNode method removes the specified attribute node.

Syntax for removeAttributeNode method

elementNode.removeAttributeNode(name);

setAttribute()

The setAttribute method adds a new attribute.

Syntax for setAttribute method

elementNode.setAttribute(name);

setAttributeNode()

The setAttributeNode method adds a new attribute node.

Syntax for setAttributeNode method

elementNode.setAttributeNode(att_node);

appendChild()

The appendChild method appends new child at the end of children node.

Syntax for appendChild method

xmldoc = loadXMLDoc(“myData.xml”);

ele = xmldoc.createElement(“cost”);

node = xmldoc.getElementsByTagName(“books”)[0];

node.appenChild(ele);

cloneNode()

The cloneNode method clones a node and returns a new node.

Syntax for cloneNode method

xmldoc = loadXMLDoc(“myData.xml”);

x = xmldoc.getElementsByTagName(“newbooks”)[0];

clone = x.cloneNode(true);

xmldoc.document.appendChild(clone);

Example of how to add a new element node to an XML file

myData.xml

<?xml version='1.0'?>

<root>

    <data>

        <animal>Lion</animal>

            <habitat>jungle</habitat>

            <type>mammal</type>

            <eatingHabit>Carnivore</eatingHabit>

    </data>

     

      <data>

        <animal>Deer</animal>

            <habitat>jungle</habitat>

            <type>mammal</type>

            <eatingHabit>Herbivore</eatingHabit>

    </data>

</root>

myData.html

<!DOCTYPE html>

<html>

   <body>

      <h1>Adding Element </h1>     

      <script>

            function loadFile(name){

                   if (window.XMLHttpRequest)

                   {// code for IE7+, Firefox, Chrome, Opera, Safari

                        xmlhttp = new XMLHttpRequest();

                   }

                   else

                   {// code for IE6, IE5

                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

                   }

                  xmlhttp.open("GET",name,false);

                  xmlhttp.send();

                  return xmlhttp.responseXML;

 

            }

           

            xmlDoc = loadFile("myData.xml");         

            x=xmlDoc.getElementsByTagName("data");         

           

            newEle=xmlDoc.createElement("FeedOn");

            newtxt = xmlDoc.createTextNode("Prey");

            newEle.appendChild(newtxt);

            x[0].appendChild(newEle);

           

            newEle=xmlDoc.createElement("FeedOn");

            newtxt = xmlDoc.createTextNode("Grass");

            newEle.appendChild(newtxt);

            x[1].appendChild(newEle);

                       

            y = xmlDoc.getElementsByTagName("animal");

            z = xmlDoc.getElementsByTagName("FeedOn");

            for (i=0; i<y.length; i++)

              {

                 

                  document.write(y[i].childNodes[0].nodeValue + " - Added node: FeedOn - " + z[i].childNodes[0].nodeValue + "<br/>")

              }          

                 

            document.write("animal has child nodes:" + y[0].hasChildNodes() + "<br/>");

            document.write("data has child nodes:" + x[1].hasChildNodes());

           

      </script>

   </body>

</html>

Output of the above example:

Adding Element

Lion - Added node: FeedOn - Prey
Deer - Added node: FeedOn - Grass
animal has child nodes:true
data has child nodes:true

 

›› go to examples ››