title: Creating Dynamic HTML with Javascript
body: <p>I have been trying to dynamically append HTML input forms using a JS function to a webpage but am having trouble inserting them into the correct location.  I have tried to create an empty div tag on line 40:</p>
  
  <pre><code>&lt;div class="itemInfo"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>However, when I try to locate that tag from within my JS function, with the findElementById()
  function it seems not to find it.  I want to create a copy of the three input forms above the empty  tag I created and append them underneath, but no matter what I have tried I have not been able to figure out how to put the forms in that exact location.  My JS function is as follows:</p>
  
  <pre><code>function newItem(){
    instance++;
    var oldInput = document.getElementById("itemInfo");
    var newDiv = document.createElement("INPUT");
    newDiv.name = "myinput";
    newDiv.value = "Enter Here";
    oldInput.insertBefore(newDiv);
  }
  </code></pre>
  
  <p>Rather than creating the forms again in this function, I would like to duplicate the following and simply append it after itself:</p>
  
  <pre><code>&lt;p&gt;Item: &lt;input type="text" name="item"/&gt; 
     Qty: &lt;input type="text" name="qty"/&gt;
     Color: &lt;input type="text" name="color"/&gt;&lt;/p&gt;
      &lt;input type ="button" value="Add Item" onclick="newItem();"/&gt;
      &lt;div class="itemInfo"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I tried to wrap the three forms in a  tag and calling that by Id, but it did not seem to work either, which is why I tried to make an empty tag after it.  I have searched everywhere and there is a lot of information regarding similar issues but I can't seem to apply the solutions to my situation.  I really appreciate any help.  Here is the entire page:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;script type ="text/javascript"&gt;
        var instance = 0;
  
      function newItem(){
        instance++;
        var oldInput = document.getElementById("itemInfo");
        var newDiv = document.createElement("INPUT");
        newDiv.name = "myinput";
        newDiv.value = "Enter Here";
        oldInput.insertBefore(newDiv);
      }
  
      &lt;/script&gt;
      &lt;title&gt;Welcome to New Age Embroidery!&lt;/title&gt;
      &lt;style type="text/css"&gt;
       body {font-family:sans-serif;color:#4f494f;}
       form input {border-radius: 7.5px;}
       h5 {display: inline;}
       .label {text-align: right}
       .ordersBook {float:left; padding-top: 10px;}
       .name {width:100%;float:left; padding:3px;}
       .wrapper { padding-left: 25px; padding-top: 20px}
      &lt;/style&gt;
     &lt;/head&gt;
     &lt;body&gt;
     &lt;input type ="button" id="btnAdd" value="Add Item" onclick="newItem();"/&gt;
      &lt;div class = "wrapper"&gt;
       &lt;h1&gt;Welcome to New Age Embroidery!&lt;/h1&gt;
       &lt;div class="ordersBook_input"&gt;
       &lt;form method ="post" class="form" action = "/newguest" method = 'post'&gt;
         Name: &lt;input type="text" name="name"/&gt;
  
         &lt;p&gt;Item: &lt;input type="text" name="item"/&gt; 
         Qty: &lt;input type="text" name="qty"/&gt;
         Color: &lt;input type="text" name="color"/&gt;&lt;/p&gt;
          &lt;input type ="button" value="Add Item" onclick="newItem();"/&gt;
          &lt;div class="itemInfo"&gt;&lt;/div&gt;
  
         &lt;p&gt;Phone: &lt;input type="text" name="phone"/&gt;
         Email: &lt;input type="text" name="email"/&gt;
         Artwork: &lt;input type="file" name="file"/&gt;
         &lt;p&gt;Quote: &lt;input type="text" name="quote"/&gt;&lt;/p&gt;
       &lt;/p&gt;
         &lt;p&gt;Notes: &lt;textarea cols="40" rows="10"&gt;&lt;/textarea&gt;
       &lt;/p&gt;
         &lt;input type="submit" value='Add Order'/&gt;
       &lt;/form&gt;
       &lt;/div&gt;
       &lt;div class ="ordersBook"&gt;
        &lt;h3&gt;Orders&lt;/h3&gt;
        %for name in mynames:
        &lt;div class="name"&gt;
        &lt;h5&gt;Name:&lt;/h5&gt; {{name['name']}}
         &lt;h5&gt;Phone:&lt;/h5&gt;{{name['phone']}}
         &lt;h5&gt;Email:&lt;/h5&gt;{{name['email']}}
         &lt;form action="/view/{{name['_id']}}" method='GET' &gt;&lt;input type="submit" value="View"&gt;
         &lt;/form&gt;
         &lt;form action="/remove/{{name['_id']}}" method='POST'&gt; &lt;input type="submit" value="Remove" onClick="confirm('Are you sure you want to permenantly remove this order?')"&gt;
  
         &lt;/form&gt;
       &lt;/div&gt;
       %end
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>