I am trying to use the javascript DOM API to create dynamic HTML content. What I would like to do is get a portion of an xml document and insert it into an HTML document dynamically. The problem is, while I can insert TEXT all I want, I can't get copies of the elements and attributes themselves. Basically, I would like it to be like a cut and paste of part of my xml file. Here is some sample code:
<html>
<head>
<title>XML Document Test</title>
</head>
<body>
<p id="myID">Testing!</p>
<script type="text/javascript">
function loadXML()
{
if(window.ActiveXObject)
{
var text = document.forms[0].selector.options[document.forms[0].selector.selectedIndex].text;
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load("data.xml");
document.getElementById("myID").innerHTML = xmlDoc.getElementsByTagName(text)[0].firstChild.cloneNode(true);
}
else
document.write("error!");
}
</script>
<form>
<select onchange="loadXML()" id="selector">
<option>--pick one--</option>
<option>child1</option>
<option>child2</option>
</select>
</form>
</body>
</html>
Now here's the XML file...
<?xml version="1.0" encoding="UTF-8"?>
<root>
<child1>
<b>This is the first child node.</b>
</child1>
<child2>
<i>This is the second child node.</i>
</child2>
</root>
<html>
<head>
<title>XML Document Test</title>
</head>
<body>
<p id="myID">Testing!</p>
<script type="text/javascript">
function loadXML()
{
if(window.ActiveXObject)
{
var text = document.forms[0].selector.options[document.forms[0].selector.selectedIndex].text;
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.load("data.xml");
document.getElementById("myID").innerHTML = xmlDoc.getElementsByTagName(text)[0].firstChild.cloneNode(true);
}
else
document.write("error!");
}
</script>
<form>
<select onchange="loadXML()" id="selector">
<option>--pick one--</option>
<option>child1</option>
<option>child2</option>
</select>
</form>
</body>
</html>
Now here's the XML file...
<?xml version="1.0" encoding="UTF-8"?>
<root>
<child1>
<b>This is the first child node.</b>
</child1>
<child2>
<i>This is the second child node.</i>
</child2>
</root>