<!DOCTYPE html>
<html lang="en-US">
<body>
<p id="point">Click the button to create and add CDATA section</p>
<button onclick="myFunction()">Click Me</button>
<script>
var x = document.getElementById("point");
var txt = "";
function myFunction() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200) {
var xmlDoc=xhttp.responseXML;
var weight = xmlDoc.getElementsByTagName("weight")[0];
txt += "John's weight before adding the CDATA Section:<br>";
txt += weight.childNodes[0].nodeValue;
var cdat=xmlDoc.createCDATASection(" Kg");
weight.appendChild(cdat);
txt += "<br>John's weight after adding the CDATA Section:<br>"
txt += weight.childNodes[0].nodeValue;
txt += weight.childNodes[1].nodeValue;
x.innerHTML=txt;
}
};
xhttp.open("GET", "/john.xml", true);
xhttp.send();
}
</script>
<p>The xml file used in the example: <a target="_blank" href="/john.xml">john.xml</a></p> </body>
</html>