javascript --- get a new data everytime user press the button and cancel the previous one

Question

everytime a user press the button I want to overwrite on the <h1> to whatever the user insert(in this case will always be a date), instead of keep adding child on the DOM, can someone help me? here's the code:

const header = document.createElement("h1");
header.classList.add("star-sign");
div.appendChild(header);

If ('statement'){header.innerHTML = 'execute'}

Answer 1

You can set the textContent property of your h1 when the button is clicked. See the example below.

document.querySelector('#button').addEventListener('click', () => {
  document.querySelector('#date_heading').textContent = document.querySelector('#date_input').value;
});

<h1 id="date_heading">Date</h1>
<input id="date_input" type="date">
<button id="button">Submit</button>