title: Create multiple HTML elements with a loop
body: <p>I currently have this: 
  As you can see the two boxes are hard coded.</p>
  
  <p>What is a the easiest way to create those 2 boxes with the given XML file?</p>
  
  <pre><code>&lt;collection&gt;
   &lt;beanRepresentation&gt;
   &lt;beanRepId&gt;222&lt;/beanRepId&gt;
   &lt;beanRepName&gt;Bean 1&lt;/beanRepName&gt;
   &lt;top&gt;0&lt;/top&gt;
   &lt;left&gt;0&lt;/left&gt;
   &lt;height&gt;0&lt;/height&gt;
   &lt;width&gt;0&lt;/width&gt;
   &lt;/beanRepresentation&gt;
  
   &lt;beanRepresentation&gt;
   &lt;beanRepId&gt;223&lt;/beanRepId&gt;
   &lt;beanRepName&gt;Bean 2&lt;/beanRepName&gt;
   &lt;top&gt;0&lt;/top&gt;
   &lt;left&gt;0&lt;/left&gt;
   &lt;height&gt;0&lt;/height&gt;
   &lt;width&gt;0&lt;/width&gt;
  &lt;/beanRepresentation&gt;
  
  &lt;/collection&gt;
  </code></pre>
  
  <p>top is the "top" inside here, so is "left" and beanRepId is the "id":</p>
  
  <pre><code>&lt;div class=" normal" id="1"
                          style="text-align:left;
                          top:  13em;
                          left: 5em;
                          height: 10em; 
                          width: 12em;"&gt;
  </code></pre>
  
  <p>I saw this example from <a href="http://www.w3schools.com/xml/tryit.asp?filename=tryxml_display_table" rel="nofollow">http://www.w3schools.com/xml/tryit.asp?filename=tryxml_display_table</a> but document.write does not work, the boxes do not get drawn.</p>