title: Add more text fields dynamically in new line (html)
body: <p>I used code from <a href="http://viralpatel.net/blogs/dynamic-add-textbox-input-button-radio-element-html-javascript/" rel="nofollow">http://viralpatel.net/blogs/dynamic-add-textbox-input-button-radio-element-html-javascript/</a> html-javascript/ .my code is this: </p>
  
  <pre><code>&lt;HTML&gt;
  &lt;HEAD&gt;
  &lt;TITLE&gt;Dynamically add Textbox, Radio, Button in html Form using JavaScript&lt;/TITLE&gt;
  &lt;SCRIPT language="javascript"&gt;
  function add() {
  
      for (i=1; i&lt;=5; i++)
        {
          //Create an input type dynamically.
          var element = document.createElement("input");
       
          //Assign different attributes to the element.
          element.setAttribute("type", i);
          element.setAttribute("name", i);
          element.setAttribute("value", i);
       
       
          var foo = document.getElementById("fooBar");
       
          //Append the element in page (in span).
          foo.appendChild(element);
        }
  
   
  }
  &lt;/SCRIPT&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
  &lt;FORM&gt;
  &lt;H2&gt;Dynamically add element in form.&lt;/H2&gt;
  Select the element and hit Add to add it in form.
  &lt;BR/&gt;
  &lt;INPUT type="button" value="Add" onclick="add()"/&gt;
       
  &lt;span id="fooBar"&gt;&amp;nbsp;&lt;/span&gt;
       
  &lt;/FORM&gt;
  &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>
  
  <p>That code works. But instead of adding it horizontally, I want every new text field added in a new line. I've tried to use <code>&lt;/script&gt;&lt;br/&gt;&lt;script&gt;</code>, <code>&lt;html&gt;&lt;br/&gt;&lt;/html&gt;</code>, <code>document.write("\n")</code>, and <code>document.write("\r\n")</code> in the loop function but it doesnt work like what I want. What should I do?</p>