title: Creating labels dynamically with javascript
body: <p>Is there a better way of creating a information fieldset dynamically than this:</p>
  
  <pre><code>                var grid = document.createElement("ul");
                  grid.style['text-align'] = "left";
  
                  // Creates the legend and append it
                  var child = document.createElement('legend');
                  child.innerHTML = "Logado - Dados";
                  loginbox.appendChild(child);
                  // End of creating the legend
  
                  // Start creating the first child
                  var cell = document.createElement("li");
                  cell.style['padding'] = "0px";
                  child = document.createElement('label');
                  child.innerHTML = "&lt;b&gt;Usuário: &lt;/b&gt;";
                  child.for = "lusername";
                  cell.appendChild(child);
                  child = document.createElement('label');
                  child.innerHTML = response['username'];
                  child.for = "username";
                  cell.appendChild(child);
                  grid.appendChild(cell);
                  // End adding the first labels
  
                  // Start adding the second label                
                  cell = document.createElement("li");
                  cell.style['padding'] = "0px";
                  child = document.createElement('label');
                  child.innerHTML = "&lt;b&gt;Membro Desde: &lt;/b&gt;";
                  child.for = "lbirthday";
                  cell.appendChild(child);
                  child = document.createElement('label');
                  child.innerHTML = response['MemberSince'];
                  child.for = "birthday";
                  cell.appendChild(child);
                  grid.appendChild(cell);
                  // End adding the second labels
  
                  // Start adding the third label             
                  cell = document.createElement("li");
                  cell.style['padding'] = "0px";
                  child = document.createElement('label');
                  child.innerHTML = "&lt;b&gt;Última Visita: &lt;/b&gt;";
                  child.for = "llastvisit";
                  cell.appendChild(child);
                  child = document.createElement('label');
                  child.innerHTML = response['LastVisit'];
                  child.for = "lastvisit";
                  cell.appendChild(child);
                  grid.appendChild(cell);
                  // End adding the third labels
  
                  // Start adding the forth label             
                  cell = document.createElement("li");
                  cell.style['padding'] = "0px";
                  child = document.createElement('label');
                  child.innerHTML = "&lt;b&gt;Frequência de Estudo: &lt;/b&gt;";
                  child.for = "lstudyfrequency";
                  cell.appendChild(child);
                  child = document.createElement('label');
                  child.innerHTML = response['StudyFrequency'];
                  child.for = "studyfrequency";
                  cell.appendChild(child);
                  grid.appendChild(cell);
                  // End adding the forth labels
  
                  // Start adding the fifth label             
                  cell = document.createElement("li");
                  cell.style['padding'] = "0px";
                  child = document.createElement('label');
                  child.innerHTML = "&lt;b&gt;Faculdade: &lt;/b&gt;";
                  child.for = "lcollege";
                  cell.appendChild(child);
                  child = document.createElement('label');
                  child.innerHTML = response['College'];
                  child.for = "college";
                  cell.appendChild(child);
                  grid.appendChild(cell);
                  // End adding the fifth labels
  
                  // Start adding the sixth label             
                  cell = document.createElement("li");
                  cell.style['padding'] = "0px";
                  child = document.createElement('label');
                  child.innerHTML = "&lt;b&gt;Curso: &lt;/b&gt;";
                  child.for = "lcourse";
                  cell.appendChild(child);
                  child = document.createElement('label');
                  child.innerHTML = response['Course'];
                  child.for = "course";
                  cell.appendChild(child);
                  grid.appendChild(cell);
                  // End adding the sixth labels
  
              loginbox.appendChild(grid);
  </code></pre>
  
  <p>I think trying to use, somehow, the "write" method would be better.
  sorry, i'm new to javascript.</p>