I'm trying to include some (effectivly) static XML data in an HTML file, and then parse it out with JavaScript. The test case below works fine in Firefox, Opera and Chrome (I get the expected list of nodes and depths), but fails in IE8 (all the nodes are at the same depth, and end tags are included in the node list).
Question: How do I fix the code to work as expected in IE?
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Odd Ie behavior - test case</title>
<script type="text/javascript">
function p(text) {
var out = document.getElementById("output");
out.innerHTML += text + "<br>";
}
function walkDom(node, depth) {
var i, il;
if (node.nodeType === 1) {
p("Node( " + depth + "): " + node.nodeName);
if (node.childNodes && node.childNodes.length > 0) {
for (i = 0; i < node.childNodes.length; i += 1) {
il = node.childNodes[i];
walkDom(il, depth + 1);
}
}
}
}
function init() {
var data = document.getElementById("data");
walkDom(data, 0);
}
</script>
</head>
<body onload="init()" id="body">
<div id="data" style="display: none"><data><ele><foo>Foo</foo><bar></bar></ele></data></div>
<div id="output"></div>
</body>
</html>
"Correct" output
Node( 0): DIV
Node( 1): DATA
Node( 2): ELE
Node( 3): FOO
Node( 3): BAR
IE output
Node( 0): DIV
Node( 1): DATA
Node( 1): ELE
Node( 1): FOO
Node( 1): /FOO
Node( 1): BAR
Node( 1): /BAR
Node( 1): /ELE
Node( 1): /DATA