title: Add input fields to div container (javascript)
body: <p>I want to add some html data to the end of a div container.
  Currently, I do it with using innerHtml:</p>
  
  <pre><code>&lt;script language="javascript"&gt;
  var addid = 0;
  
  function addInput(id){
      var docstyle = document.getElementById('addlist').style.display;
      if(docstyle == 'none')
          document.getElementById('addlist').style.display = '';
  
      addid++;
  
      var text = "&lt;div id='additem_"+addid+"'&gt;&lt;input type='text' size='100' value='' class='buckinput' name='items[]' style='padding:5px;' /&gt; &lt;a href='javascript:void(0);' onclick='addInput("+addid+")' id='addlink_"+addid+"'&gt;add more&lt;/a&gt;&lt;/div&gt;";
  
      document.getElementById('addlist').innerHTML += text;
  }
  &lt;/script&gt;
  
  &lt;div id="addlist" class="alt1" style="padding:10px;"&gt;
      New list items are added to the bottom of the list.
      &lt;br /&gt;&lt;br /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that the value that was entered in the input fields is removed once another input field is added.
  How can I add content without and keep the entered data?</p>
  
  <p>PS: I do not use jquery.</p>