<!DOCTYPE html>
<html lang="en-US">
<body>
<p>Display XML with CSS property</p>
<p>Click the button to create processing instruction of xml</p>
<button onclick="myFunction()">Click Me</button>
<p id="point"></p>
<script>
var x = document.getElementById("point");
function myFunction() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
var xmlDoc=xhttp.responseXML;
var pi = xmlDoc.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"');
xmlDoc.insertBefore(pi, xmlDoc.firstChild);
var xmlText = new XMLSerializer().serializeToString(xmlDoc);
var xmlTextNode = document.createTextNode(xmlText);
x.appendChild(xmlTextNode);
}
};
xhttp.open("GET", "/person.xml", true);
xhttp.send();
}
</script>
<p>The xml file used in the example: <a target="_blank" href="/person.xml">person.xml</a></p> </body>
</html>