title: Adding dropdown list to new row on button click
body: <p>I am trying to add a new row on button click. In my new row I am trying to add a Textbox and a dropdown list. I don't know what I am doing wrong ? Can anybody help me with this problem. Thanks in advance. </p>
  
  <p>HTML </p>
  
  <pre><code>&lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type="text" name="data1" value="TempData" /&gt;&lt;/td&gt;
                &lt;td&gt;&lt;button type="button" onClick ="addRow(this)"&gt;Add&lt;/button&gt;&lt;/td&gt;
           &lt;/tr&gt;
  
   &lt;/table&gt;
  </code></pre>
  
  <p>Javascript function: </p>
  
  <pre><code>function addRow(btn) {         
      var parentRow = btn.parentNode.parentNode;
      var table = parentRow.parentNode;
      var rowCount = table.rows.length;
  
      var row = table.insertRow(rowCount);
  
      var cell1 = row.insertCell(0);
      var element1 = document.createElement("input");
      element1.type = "text";
      cell1.appendChild(element1);
  
  
      var cell3 = row.insertCell(1);
      var element2 = document.createElement("input");
      element2.type = "select";
      var option1 = document.createElement("option");
      option1.innerHTML = "Option1";
      option1.value = "1";
      element2.add(option1, null);
      var option2 = document.createElement("option");
      option2.innerHTML = "Option2";
      option2.value = "2";
      element2.add(option2, null);
      cell3.appendChild(element2);
  }
  </code></pre>
  
  <p>JSFiddle
  <a href="http://jsfiddle.net/wAyhm/2/" rel="nofollow">http://jsfiddle.net/wAyhm/2/</a></p>