title: Insert a new row of input tags using JavaScript
body: <p>I would like to append a new row of 5 input tags to the <code>&lt;td&gt;</code> element, which is a child of <code>&lt;tr class="unit"&gt;</code>, and which is a grandchild of <code>&lt;table id="myTable"&gt;</code> element. </p>
  
  <p>In my Javascript code, I was able to console-log the 5 input tags, but was not able to append them to the <code>&lt;td&gt;</code> element and to the rest of the parent elements. </p>
  
  <p>Is my code on the right track for solving this? </p>
  
  <p>Here's a link to the what I'm doing <a href="http://codepen.io/johnnyginbound/pen/xZxZNo?editors=101" rel="nofollow">http://codepen.io/johnnyginbound/pen/xZxZNo?editors=101</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function addRow(){
    var parentTable = document.getElementById('myTable');
    var tableRow = document.getElementsByTagName('tr')[0].children;
    var unitTables = document.getElementsByClassName('unit-table')[0];
    var newInputType = document.createElement('input');
    newInputType.setAttribute('type', 'text');
    
    for(var i=0; i&lt;unitTables.children.length; i++){
      var appendedInput = unitTables.children[i].appendChild(newInputType)
      parentTable.appendChild(appendedInput);
    }
  }
  
  document.getElementById('add_btn').onclick=addRow;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
  
    &lt;div class="panel panel-default"&gt;
      &lt;!-- Default panel contents --&gt;
      &lt;div class="panel-heading"&gt;Panel heading&lt;/div&gt;
      &lt;div class="panel-body"&gt;
        &lt;p&gt; ASME Email: &lt;/p&gt;
        &lt;input type="text" name="email"&gt;
        &lt;br /&gt;
        &lt;br /&gt;
  
      &lt;/div&gt;
  
      &lt;!-- Table --&gt;
      &lt;table id="myTable" class="table"&gt;
        &lt;tr&gt;
          &lt;th&gt; Technology &lt;/th&gt;
          &lt;th&gt; Markets &lt;/th&gt;
          &lt;th&gt; Enduring/Emerging &lt;/th&gt;
          &lt;th&gt; ASME Relevency &lt;/th&gt;
          &lt;th&gt; Comments &lt;/th&gt;
        &lt;/tr&gt;
  
        &lt;tr class="unit-table"&gt;
          &lt;td&gt;
            &lt;input type="text"&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="text"&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="text"&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="text"&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="text"&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="unit-table"&gt;
          &lt;td&gt;
            &lt;input type="text"&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="text"&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="text"&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="text"&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="text"&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="unit-table"&gt;
          &lt;td&gt;
            &lt;input type="text"&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="text"&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="text"&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="text"&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="text"&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  
    &lt;button id="add_btn"&gt;Add new row&lt;/button&gt;
    &lt;input type="submit" name="submit" value="Submit"&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>