title: Adding html input to table
body: <p>I can't get the codes to work. Can somebody point out what have I done wrong? I just want to print the input to a table using JavaScript.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>Item:
  &lt;input type="text" name="item" id="item" /&gt;&lt;br /&gt;
  Quantity:
  &lt;input type="text" name="quantity" id="quantity" /&gt;&lt;br /&gt;
  Price: AUD
  &lt;input type="text" name="price" id="price" /&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;input type="button" value="Add Product +" onClick="addRow()" id="add"&gt;&lt;br /&gt;&lt;br /&gt;
  
  &lt;table id="table" border="1"&gt;
      &lt;tr&gt;
          &lt;th&gt;Item&lt;/th&gt;
          &lt;th&gt;Quantity&lt;/th&gt;
          &lt;th&gt;Price&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>function addRow() {
     "use strict";
  
      var table = document.getElementById("table");
      var td1 = document.createElement("td");
      var td2 = document.createElement("td");
      var td3 = document.createElement("td");    
  
      td1.innerHTML = document.getElementById("item").value;
      td2.innerHTML  = document.getElementById("quantity").value;
      td3.innerHTML  = document.getElementById("price").value;
  
      row.appendChild(td1);
      row.appendChild(td2);
      row.appendChild(td3);
  
      table.children[0].appendChild(row);
  });
  </code></pre>