Aunque los resultados van a ser parecidos en algunos casos, no lo van a ser en todos (como bien indica Asier en su respuesta). Ahora, hay más diferencias que sólo las que se indican ahí.
Voy a aprovechar para introducir dos más que no aparecen en la pregunta, pero que son relevantes para este caso: .textContent
e .innerText
(existe un .outerText
pero no es estándar).
Para que funciona cada uno de ellos:
.innerHTML
devuelve texto y código (en forma de texto), es decir te va a devolver las etiquetas y el texto contenido en ellas.
.innerText
devuelve sólo el texto renderizado. La parte clave es "renderizado". Eso quiere decir que sólo se mostrará el texto que el navegador puede mostrar (p.e. si hay un script
el código de dentro no se mostrará como texto).
.textContent
devuelve sólo el texto. Y es importante identificar que por texto en este caso nos referimos a todo el texto contenido (p.e. si hay un script
, el código se mostrará como texto aunque no sea visible en la página).
.text
funciona como una versión corta de sólo lectura de .textContent
... aunque lo de "sólo lectura" no es algo que los navegadores impongan. Además, su comportamiento va a cambiar dependiendo del elemento en el que se utilice y se considera obsoleto para algunos elementos.
Vamos a ver un ejemplo con esas cuatro funciones en el elemento body
(uno de los que difiere y que se considera obsoleto desde HTML 5):
var miBody = document.getElementById("miBody");
console.log(miBody.innerHTML);
console.log(miBody.textContent);
console.log(miBody.text);
console.log(miBody.innerText);
<body id="miBody">
<a href="miA" href="http://es.stackoverflow.com">Soy un enlace</a>
<script id="miScript">
var variable = 1;
</script>
Texto suelto
</body>
¿Por qué devuelve una cadena vacía para .text
? Dato interesante: en versiones anteriores de HTML, el atributo text
en el body
servía para cambiar el color de la fuente, aunque esa funcionalidad se considera obsoleta desde hace años, los navegadores la siguen utilizando. Por ejemplo, si haces miBody.text = "#ff0000";
esperarías que el texto de la página cambiara a #ff0000, ¿no? ¡No! El color del texto cambiará a rojo:
var miBody = document.getElementById("miBody");
miBody.text = "#ff0000";
<body id="miBody">
<a href="miA" href="http://es.stackoverflow.com">Soy un enlace</a>
<script id="miScript">
var variable = 1;
</script>
Texto suelto
</body>
Es un ejemplo de un atributo que debería funcionar de un modo, pero los navegadores lo usan de otro diferente. En lugar de usar .text
deberías usar .innerText
o .textContent
, que son estándar y soportados por todos los navegadores modernos.