.innerHTML vs .value ... ¿cuándo y por qué?

Cuándo y por qué debería usarse uno sobre el otro.

A veces:

element.value = "Fred"; funciona y, a veces element.innerHTML = "Fred"; trabajos

¿Cómo?

valuese refiere a un atributo de una etiqueta, mientras que se innerHTMLrefiere al contenido entre el principio y el final de una etiqueta.

div.innerHTML == "algún texto"

<div>some text</div>

input.value == "algún texto"

<input value="some text"/>

innerHTML también devuelve nodos secundarios y su contenido de un nodo primario, como:

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

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