Serializing an INPUT. Not getting its (updated) value

Question

Simple question (I think):

If you change the value in an input, the string result from XMLSerializer isn't showing the value

In my snippet, try entering a in the input, and then clicking serialize.

Why isn't it changing, and what can I do to get the updated HTML of the INPUT?

document.getElementById('clk').addEventListener("click", function() {
  console.log(new XMLSerializer().serializeToString(document.getElementById('foo')));
});

<input id='foo' />
<button id='clk'>Serialize</button>

Answer 1

You could use an input event (or change event) listener to update the value attribute

document.getElementById('clk').addEventListener("click", function() {
  console.log(new XMLSerializer().serializeToString(document.getElementById('foo')));
});


document.querySelector('input#foo').addEventListener("input", function(){
   this.setAttribute('value', this.value);
})

<input id='foo' />
<button id='clk'>Serialize</button>