Создайте несколько элементов HTML с контуром

Question

В настоящее время у меня есть это: Как вы можете видеть, эти две коробки жестко закодированы.

Что представляет собой самый простой способ создать эти 2 коробки с данным XML-файлом?

<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> 

верх «верх» внутри здесь, так как «левый» и beanRepId является «идентификатор»:

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

Я видел этот пример из http://www.w3schools.com/xml/tryit.asp?filename=tryxml_display_table но document.write не работает, коробки не нарисованы.

Answer 1

Рабочий стол here. Обратите внимание, что я изменил файл XML. Сценарий выглядит следующим образом

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>"); 
} 

Он основан на w3schools example вы связаны. Не стесняйтесь задавать дополнительные вопросы.