innerText、innerHTML、outerText、outerHTMLは何がちがう

いいサンプルが思い付かなかったが、要するに次のとおり。

innerText……要素のタグは活きる。新たに指定した文字はテキストとして扱われる。
innerHTML……要素のタグは活きる。新たに指定した文字はHTMLとして扱われる。
outerText……要素と新たに指定した文字が入れ替わる。
outerHTML……要素と新たに指定したHTMLが入れ替わる。

うまく説明できてないが、このサンプルではボタンクリックで次のような変化がある。

1つ目(innerText):元のタグの内側に純粋な文字列として入る
2つ目(innerHTML):元のタグの内側にHTMLとして入る
3つ目(outerText):元のタグが削除されたうえで、指定した記述が純粋な文字列として置き換わる
4つ目(outerHTML):元のタグが削除されたうえで、指定した記述がHTMLとして置き換わる


innerText property
innerHTML property
outerText property
outerHTML property