Create multiple HTML elements with a loop

Question

I currently have this: As you can see the two boxes are hard coded.

What is a the easiest way to create those 2 boxes with the given XML file?

<collection>
 <beanRepresentation>
 <beanRepId>222</beanRepId>
 <beanRepName>Bean 1</beanRepName>
 <top>0</top>
 <left>0</left>
 <height>0</height>
 <width>0</width>
 </beanRepresentation>

 <beanRepresentation>
 <beanRepId>223</beanRepId>
 <beanRepName>Bean 2</beanRepName>
 <top>0</top>
 <left>0</left>
 <height>0</height>
 <width>0</width>
</beanRepresentation>

</collection>

top is the "top" inside here, so is "left" and beanRepId is the "id":

<div class=" normal" id="1"
                        style="text-align:left;
                        top:  13em;
                        left: 5em;
                        height: 10em; 
                        width: 12em;">

I saw this example from http://www.w3schools.com/xml/tryit.asp?filename=tryxml_display_table but document.write does not work, the boxes do not get drawn.

Answer 1

You can find a working example here. Note that i modified the XML file. The script looks as following

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","catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

var x=xmlDoc.getElementsByTagName("beanRepresentation");
for (i=0;i<x.length;i++) { 
    document.write("<div class=\"normal\" id=\"");
    document.write(x[i].getElementsByTagName("beanRepId")[0].childNodes[0].nodeValue);
    document.write("\" style=\"text-align:left;\ top:");
    document.write(x[i].getElementsByTagName("top")[0].childNodes[0].nodeValue);
    document.write("em; left:");
    document.write(x[i].getElementsByTagName("left")[0].childNodes[0].nodeValue);
    document.write("em; height:");
    document.write(x[i].getElementsByTagName("height")[0].childNodes[0].nodeValue);
    document.write("em; width:");
    document.write(x[i].getElementsByTagName("width")[0].childNodes[0].nodeValue);
    document.write("em;\"></div>");
}

It is based on the w3schools example you linked to. Feel free to ask further questions.