【JavaScript】innerHTML と innerText と textContent の違い

TL;DR
innerHTML は HTMLコード、innerText は表示される文字列、textContent は純粋な文字列。

JavaScript では HTML 要素を表現するインターフェースが存在し、それを満たすものには innerHTML、innerText、textContent がプロパティとして存在することが確約されます。これらはそれぞれある要素の内部の文字列を表現するプロパティという点で似た部分がありますが決定的に違う部分も少なくありません。その違いを紹介します。

element.innerHTML – Web API ｜ MDN
HTMLElement.innerText – Web API ｜ MDNNode.textContent – Web API ｜ MDN

　実際に

<table>
<tbody><tr><td><p>セル1&amp;</p></td><td>セル2</td></tr></tbody>
</table>

という HTMLコードとして成立する文字列をそれぞれのプロパティに代入した結果のデモが次です。

　それぞれ次の様になっていることがわかります。

　textContent が一番文字列そのままで innerHTML が完全に HTML と化しており、innerText は改行が HTML になっています。
　また、同様のHTMLコードとして成立する文字列から成るDOMを読み取った結果のデモが次です。

　innerHTML は HTML コードをそのまま、innerText は元の表示を再現しようとするテキスト、textContent は各種修飾を無視してテキストをそのまま、となっています。
　またデモで見えない違いですが textContent はレンダリングを考慮せず、パースも単純なので代入処理は innerText、innerHTML のいずれよりも速いです。