.innerHTML vs .value ... when and why?

Question

When – and why – should one be used over the other.

Sometimes:

element.value = "Fred"; works and sometimes element.innerHTML = "Fred"; works

how come?

Answer 1

value refers to an attribute of a tag, while innerHTML refers to the contents between a tag's beginning and end.

div.innerHTML == "some text"

<div>some text</div>

input.value == "some text"

<input value="some text"/>

innerHTML also returns child nodes and their content of a parent node, such as:

<div id="d"><p>some text</p></div>

var d = document.getElementById("d");
console.log(d.innerHTML); //prints <p>some text</p>