Javascript无法生成包含XML信息的div。 （xml初学者）

Question

I am trying to create a script that will generate divs depending on the information of the XML file that I desire. The issue is that my script does not work at all. What I did was to find the code on w3schools.org and modified it a bit to match what I wanted it to do.

The results:

<script type="text/javascript">
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","products.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

var size=0;
var i=0;
var x=xmlDoc.getElementsByTagName("honey");
var y=x.length;
var final=null;

function gethoney()
{
   for (i < y) 
   { 
     a1='<div style="height:200px;width:300px;float:left;background-color:#FFF5CC;opacity:0.7;text-align:center;">';
     a2='<p><b>';
     a3=(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
     a4='<br>';
     a5=(x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);
     a6='</br></b></p>';
     a8='</div>';
     a9='<div style="height:200px;width:20px;float:left;"></div>';
     a10='<div style="height:200px;width:100px;float:left;">';
     a11=(x[i].getElementsByTagName("image")[0].childNodes[0].nodeValue);
     a12='</div>';
     final=final + a1 + a2 + a3 + a4 + a5 + a6 + a8 + a9 + a10 + a11 + a12;
     size=size+300;
     i=i+1;
   }
document.getElementById("mainbody").style.height=size;
size=size-20;
document.getElementById("products").style.height=size;
document.getElementById("products").innerHTML=final;
}
</script>

Using final in order to save every single div doesn't seem like an ideal way to me but I did it anyway.

and the XML is this:

<?xml version="1.0" encoding="windows-1252"?>
<honey>
   <name>one</name>
   <price>3</price>
   <image><img src=""></img></image>
   <disc>This is a honey</disc>
</honey>
<honey>
   <name>one</name>
   <price>3</price>
   <image><img src=""></img></image>
   <disc>This is a honey</disc>
</honey>
etc etc

I tried to find info about this but without any luck. Could anyone point out what I am doing wrong and suggest improvements/corrections? Also, it would be appreciated if someone could write down a way to generate the divs without using final to save them and then innerHTML.

Answer 1

1) Your xml file is not xml.

2) Change this:

xmlDoc=xmlhttp.responseXML; 

to this:

xmlDoc = xmlhttp.responseXML.documentElement; 

2)

for (i < y) 

That's an error.

4) You define a function called gethoney() that you never call. But you shouldn't call that function until you can get something like this to work:

console.log("==>" + xmlDoc[0].getElementsByTagName("name")[0].childNodes[0].nodeValue);