title: Adding input fields in Javascript with onclick button
body: <p>Im always used to using jquery or other javascript frameworks but right now I have no frameworks to use so i wanted to see if anyone knows how i can do this in straight javascript if possible.</p>
  
  <p>Basically i have a div like this</p>
  
  <pre><code>&lt;input type="button" id="more_fields" onclick="add_fields();" value="Add More" /&gt;
  
  &lt;div id="room_fileds"&gt;
      &lt;div class='label'&gt;Room 1:&lt;/div&gt;
      &lt;div class="content"&gt;
          &lt;span&gt;Width: &lt;input type="text" style="width:48px;" name="width[]" value="" /&gt;&lt;small&gt;(ft)&lt;/small&gt; X &lt;/span&gt;
          &lt;span&gt;Length: &lt;input type="text" style="width:48px;" namae="length[]" value="" /&gt;&lt;small&gt;(ft)&lt;/small&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What i need one is when the add more button is clicked i need to basically add more width and length fields either creating a entire structure like the one above with all the divs or just inserting new span tag with the fields below the existing ones.</p>
  
  <p>I know how to do it with jquery or prototype framework but unfortunatley I cannot use any frameworks for this. Does anyone have any idea how to do it. I would post code iv done for this but I dont even know where to beging. </p>