I want to dynamically add row data to HTML Table

Question

I have two input fields, date and miles . The HTML table has those columns. How do I grab the input values and on "submit" button, insert that data into a new row in the table?

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"));
});

<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>

Answer 1

Create td elements and append them to the tr element that you created.

 var mileSubmit = document.getElementById("add-mileage"); mileSubmit.addEventListener("click", function() { const date = document.getElementById("date_miles").value; const mileage = document.getElementById("miles").value; const row = document.createElement("tr"); const td1 = document.createElement("td"); td1.innerText = date; row.appendChild(td1); const td2 = document.createElement("td"); td2.innerText = mileage; row.appendChild(td2); document.getElementById("mile_book").appendChild(row); });

 <form class="miles_form"> <label for="date">Date:</label> <input type="date" id="date_miles" name="date_miles"> <br> <label>Enter Current Mileage:</label> <input name="mileage" type="number" id="miles"><br> <button type="button" id="add-mileage">Add</button> </form> <table id="mile_book"> <tr> <th>Date</th> <th>Mileage</th> </tr> </table>