如何在javascript中将输入字段动态添加到我的html表格行内的单元格中？

Question

这是我的代码：

var tab=document.getElementById("quarter_details");
var input = document.createElement("input");
input.type = "text";
input.placeholder = "dd/mm/yyyy";
input.id = "vac";

var row = tab.insertRow(5);
var cell = row.insertCell(0);
var cell1 = row.insertCell(1);

cell.innerHTML = "<b>Date:</b>";
cell1.innerHTML = input; //[object HTMLInputElement]

当我运行代码时，输​​入文本字段不会出现。 我该怎么办？

编辑：尝试使用cell1.appendChild = input 。 现在它显示一个空单元格，没有输入字段

Answer 1

使用appendChild方法：

cell1.appendChild(input);

Answer 2

使用insertAdjacentHTML 。 这是一个最小的可重现示例。

 const createDateTimeInput = (forCell, id) => { forCell.textContent = ``; // empty the cell forCell.insertAdjacentHTML( `beforeend`, `<b>Date</b> <input type="text" placeholder="dd/mm/yyyy" id="${id}">`); }; const firstCellOfSecondRow = document.querySelector(`table tbody tr:nth-child(2) > td`); setTimeout(() => createDateTimeInput(firstCellOfSecondRow, `vac`), 2000);

 thead th { text-align: left }

 <table> <thead> <tr> <th>first column</th> <th>second column</th> </tr> </thead> <tbody> <tr> <td>cell</td> <td>cell</td> </tr> <tr> <td>cell</td> <td>cell</td> </tr> </tbody> </table>