Javascript 我想动态地将行数据添加到HTML表中

我有两个输入字段，

date

和

miles

。 HTML表包含这些列。如何获取输入值并在“提交”按钮上，将该数据插入表中的新行

var mileSubmit = document.getElementById("add-mileage");

mileSubmit.addEventListener("click", function () {
  const date = document.getElementById("date_miles").value;
  const mileage = document.getElementById("miles").value;
  console.log(date, mileage);
  document
    .getElementById("mile_book")
    .appendChild(document.createElement("tr"));
});

日期：
输入当前里程数：
日期
里程

创建

td

元素，并将它们附加到您创建的

tr

元素中

var mileSubmit=document.getElementById（“添加里程”）；
addEventListener（“单击”，函数（）{
const date=document.getElementById（“日期/英里”）.value；
常量里程=document.getElementById（“英里”）.value；
常量行=document.createElement（“tr”）；
const td1=document.createElement（“td”）；
td1.innerText=日期；
第3行。追加子项（td1）；
const td2=document.createElement（“td”）；
td2.innerText=里程；
第3行。追加子项（td2）；
文件
.getElementById（“里程簿”）
.儿童（世界其他地区）；
});

日期：


输入当前里程数：


添加
日期
里程
使用这种方法后，我的单元格中的每行都是空的。我没有水晶球，我看不出你有什么不同。
<form class="miles_form">
    <label for="date">Date:</label>
    <input type="date" id="date_miles" name="date_miles">

    <label>Enter Current Mileage:</label>
    <input name="mileage" type="number" id="miles">

</form>

<table id="mile_book">
    <tr>
        <th>Date</th>
        <th>Mileage</th>
    </tr>
</table>