The CDATASection represents the character data interface. This section is not parsed by the XML parser. The CDATA has the cdata-section as node name and it returns content of the node. The nodeType value is 4.

The properties and methods of CDATA interface:

data

The data property sets or returns the text of CDATA node.

Syntax for data property

CDATANode.data;

length

The length property returns the length of the CDATA section.

Syntax for length property

CDATANode.length;

appendData()

The appendData() method appends data to the end of CDATA node.

Syntax for appendData() method

CDATAnode.appendData(string);

where,

  • string is the string to be added to the CDATA node.

deleteData()

The deleteData() methods deletes data from this node.

Syntax for deleteData() method

CDATAnode.deleteData(start, length);

where,

  • start is the index from which the characters has to be removed.
  • length specifies the number of characters to be removed.

insertData()

The insertData() method inserts the data to this node.

Syntax for insertData() method

CDATAnode.insertData(start, string);

where,

  • start is the index from which the characters has to be inserted.
  • string specifies the string to be inserted.

replaceData()

The replaceData() methods replaces data in CDATA node.

Syntax for replaceData() method

CDATAnode.replaceData(start,length,string);

where,

  • start is the index from which the characters has to be replaced.
  • string specifies the string to be inserted.
  • length specifies how many characters to replace.

splitText()

The splitText() method splits CDATA node into two nodes at specified offset. It returns the text which is split after the offset. The text before offset remains in original text node.

Syntax for splitText() method

string = CDATAnode.splitText(offset);

where,

  • offset is the text to be replaced.

substringData()

The substringData() method gets data from CDATA node.

Syntax for substringData() method

CDATAnode.substringData(start, length);

where,

  • start defines the start point to extract characters.
  • length specifies how many characters to extract.

Example how to add a CDATASection to the XML DOM

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 CDATA </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");

            for(i=0; i<x.length; i++){

                  newCDATA=xmlDoc.createCDATASection("Carnivorous:Herbivorous ratio");

                  x[i].appendChild(newCDATA);

            }

      

           

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

              {

                  document.write(x[i].getElementsByTagName("animal")[0].childNodes[0].nodeValue);                 

                  document.write("-" + x[i].lastChild.nodeValue);

                  cdataNode = x[i].lastChild.nodeValue;

                  document.write(" - Length of CDATA is: " + cdataNode.length + "<br/>");

              }

             

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

            {

                  document.write("<br/> Replaced CDATA <br/>");                                                  

                  cdataNode = x[i].lastChild;

                  cdataNode.replaceData(0,29, "Herbivorous:Carnivorous ratio");

            //    document.write(x[i].lastChild.nodeValue;)

                  document.write(x[i].getElementsByTagName("animal")[0].childNodes[0].nodeValue);                 

                  document.write("-" + x[i].lastChild.nodeValue);

            }

      </script>

   </body>

</html>

Output of the example above:

Adding CDATA

Lion-Carnivorous:Herbivorous ratio - Length of CDATA is: 29
Deer-Carnivorous:Herbivorous ratio - Length of CDATA is: 29

Replaced CDATA 
Lion-Herbivorous:Carnivorous ratio
Replaced CDATA 
Deer-Herbivorous:Carnivorous ratio

 

›› go to examples ››