Why the difference between setting the value of an input via setAttribute or directly? [duplicate]

Question

In devtools, run these two lines:

1.

window.x = document.createElement("input");
x.type="text"; 
x.name="nm"; 
x.value="val"; 
x
// <input type="text" name="nm">

2.

window.x = document.createElement("input");
x.type="text"; 
x.name="nm"; 
x.setAttribute("value", "val"); 
x
// <input type="text" name="nm" value="val">

Why would it get printed differently? The value seems to be set properly in both cases. It seems like there's a disconnect between the property and the DOM attribute.

Also the getter for property .value becomes different than the result of .getAttribute('value'). I can setAttribute() all day, but .value returns old value.

Answer 1

The main difference between both the approach is setting the underlying defaultValue property. when you use setAttribute, the both defaultValue property as well as the value property will be updated/set. whereas using .value will update/set the value property of it only.

Behavior 1: (setting value using setAttribute)

x.setAttribute("value","test");
x.defaultValue; //"test"
x.value; //"test"

Behavior 2: (setting value directly using value property)

x.value = "test";
x.defaultValue; //""
x.value; //"test"