title: Is there a way to dynamically create nested divs onclick?
body: <p>I'm attempting to create a page where the user is able to customize the form to their needs by adding in extra divs or nested divs (as many layers deep as they'd like). Within each div I'd like to have text input and a button which adds another div on the same level and a button that nests a div within it. Both divs should again have a text input and a button which does the same thing.</p>
  
  <p>However I've gotten a bit stuck. When I attempt to create a nested div I always end up adding it at the very bottom instead of inside its parent. </p>
  
  <pre><code>&lt;html&gt;
      &lt;script type="text/javascript"&gt;
          var counter = 1;
          function addNode() {
              var newDiv = document.createElement('div');
              counter++;
              newDiv.innerHTML = "Entry " + counter + " &lt;br&gt;&lt;input type='text' name='myInputs'&gt;";
              document.getElementById("dynamicInput").appendChild(newDiv);
              var newButton = document.createElement('button');
              newButton.type = "button";
              newButton.onclick = addSub;
  
              document.getElementById("dynamicInput").appendChild(newButton);
          }
          function addSub() {
              var newDiv = document.createElement('div');
              counter++;
              newDiv.innerHTML = "Entry " + counter + " &lt;br&gt;&lt;input type='text' name='myInputs' style='margin:10px'&gt;";
              document.getElementById("subInput").appendChild(newDiv);
          }
      &lt;/script&gt;
      &lt;form class="form" method="POST"&gt;
          &lt;div id="dynamicInput" name="dynamicInput" multiple="multiple"&gt;
              Entry 1&lt;br&gt;&lt;input type="text" name="myInputs"&gt;
              &lt;div id="subInput" name="subInput" multiple="multiple"&gt;
                  &lt;input type="button" value="add nested" onClick="addSub();"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;input type="button" value="Add another text input" onClick="addNode();" &gt;
          &lt;input type="submit" value = "answer" multiple="multiple"/&gt;
  
      &lt;/form&gt;
  &lt;/html&gt;
  </code></pre>