对象HTMLInputElement出现而不是复选框

Question

I'm trying to have a checkbox appear in the Collected column after pressing the Add Item button however, [object HTMLInputElement] appears instead. I've tried appendChild, insertBefore and removing innerHTML but obviously that's made things worse. I've tried searching on Google and Stackoverflow for similar questions for relevant answers but no one's had a similar situation to me.

 function addItem() { var a = String(document.getElementById("it").value); var b = parseFloat(document.getElementById("iq").value); if (a.length === 0 || isNaN(b)) { window.alert("Required field empty, please enter values in both boxes."); } else { var table = document.getElementById("list"); var row = table.insertRow(-1); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); var cb = document.createElement("INPUT"); cb.setAttribute("type", "checkbox"); cell1.innerHTML = a; cell2.innerHTML = b; cell3.innerHTML = cb; } } 

 <table id="list" align="center"> <tr> <td colspan="3"> <input id="it" name="item" type="text" placeholder="Item" /> <input id="iq" name="quantity" type="text" placeholder="No." /> <br /> <input value="Add Item" type="submit" onclick="addItem()" /> <hr /> </td> </tr> <tr> <td><span>Item</span></td> <td><span>Quantity</span></td> <td><span>Collected</span></td> </tr> </table> 

Answer 1

You need to use appendChild and not overwrite the innerHTML of the cell. You are adding a new element to the DOM. This can be done by writing the HTML into the cell, but you have created the element so just append it..

 function addItem() { var a = String(document.getElementById("it").value); var b = parseFloat(document.getElementById("iq").value); if (a.length === 0 || isNaN(b)) { window.alert("Required field empty, please enter values in both boxes."); } else { var table = document.getElementById("list"); var row = table.insertRow(-1); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); var cb = document.createElement("INPUT"); cb.setAttribute("type", "checkbox"); cell1.innerHTML = a; cell2.innerHTML = b; cell3.appendChild(cb); } } 

 <table id="list" align="center"> <tr> <td colspan="3"> <input id="it" name="item" type="text" placeholder="Item" /> <input id="iq" name="quantity" type="text" placeholder="No." /> <br /> <input value="Add Item" type="submit" onclick="addItem()" /> <hr /> </td> </tr> <tr> <td><span>Item</span></td> <td><span>Quantity</span></td> <td><span>Collected</span></td> </tr> </table>