7

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.

Liam
  • 27,717
  • 28
  • 128
  • 190
Madd0g
  • 3,841
  • 5
  • 37
  • 59
  • Because the value and the value attribute are two different things. The value attribute sets the value on load (full stop). You typically just want `value`. This is the true value of the input. Though this won't be reflected in the markup. – Liam Apr 07 '16 at 08:38
  • 1
    A lot of the attributes and DOM properties are mapped together, the `value` attribute/property has [one of the longer](https://www.w3.org/TR/html5/forms.html#value-sanitization-algorithm) mapping relationship specs that I've seen... – James Thorpe Apr 07 '16 at 08:43

1 Answers1

4

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"
Rajaprabhu Aravindasamy
  • 66,513
  • 17
  • 101
  • 130
  • Do you have any documentation for this? – Lewis Apr 07 '16 at 08:41
  • @Tresdin I read it and I knew it. Let me get a citation for this. – Rajaprabhu Aravindasamy Apr 07 '16 at 08:42
  • 1
    @Tresdin Read about the defaultValue definition here. _When the type attribute of the element has the value "text", "file" or "password", this represents the HTML value attribute of the element. The value of this attribute does not change if the contents of the corresponding form control, in an interactive user agent, changes._ https://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6043025 – Rajaprabhu Aravindasamy Apr 07 '16 at 08:48
  • 2
    I've also found this paragraph on MDN. *Using setAttribute() to modify certain attributes, most notably value in XUL, works inconsistently, as the attribute specifies the default value. To access or modify the current values, you should use the properties. For example, use elt.value instead of elt.setAttribute('value', val).*. I think you should mention that the `setAttribute` approach is not recommended due to this behaviour. – Lewis Apr 07 '16 at 08:52
  • does the `defaultValue` has anything to do with `getAttribute('value')` not working after touching the `.value` property? EDIT: oh, that's exactly what you posted :) – Madd0g Apr 07 '16 at 08:52
  • @Madd0g: What do you mean by "not working"? `.getAttribute('value')` should always return the same value as `.defaultValue` – Bergi Apr 07 '16 at 08:53
  • @Bergi - as soon as I assign to .value, getAttribute no longer provides the current value of the input. It was confusing to me. – Madd0g Apr 07 '16 at 08:55
  • @Madd0g: Yes, because the attribute *is not* the current value… – Bergi Apr 07 '16 at 08:56
  • @Madd0g `getAttribute("value")` will always return defaultValue as bergi said. So you should not use .getAttribute while playing with dynamic value changes of a textbox. – Rajaprabhu Aravindasamy Apr 07 '16 at 08:57
  • @Tresdin _most notably value in XUL, works inconsistently_ Should we have to add it answer because it is telling about `XUL` not `HTML`? – Rajaprabhu Aravindasamy Apr 07 '16 at 08:59
  • ok, so I understand now that for text inputs, `setAttribute("value")` is only used to set the initial value. But what about devtools printing issue - why is assigning to the value property not creating the attribute? – Madd0g Apr 07 '16 at 09:00
  • @Madd0g That is its natural behavior. setting `value` won't affect the value attribute. And `setAttribute("value")` will set the `defaultValue` as well as the `value` property. I given examples for 2 of its usage in my answer. – Rajaprabhu Aravindasamy Apr 07 '16 at 09:16
  • I have also observed that innerHTML does not include the value attribute if set with ".value", but it returns the value attribute if set with setAttribute – Tejasvi Hegde Dec 22 '18 at 08:58