cf
- element.insertAdjacentHTML - Web API | MDN
- Node.textContent - Web API | MDN
- Element.innerHTML - Web API | MDN
- ドキュメントの変更
- innerHTML より insertAdjacentHTML を使う - Qiita
- JavaScript textContentとinnerHTMLの違いのサンプル | ITSakura
insertAdjacentHTML
element.insertAdjacentHTML - Web API | MDN
insertAdjacentHTML() は、第二引数で指定するテキストを HTML または XML としてパースし、その結果であるノードを DOM ツリー内の指定された位置（第一引数で指定）に挿入します。これは挿入先の要素を再度パースするものではないため、既存の要素や要素内部の破壊を伴いません。余分なシリアル化のステップを回避できる分、 innerHTML への代入による直接的な操作よりもはるかに高速な動作となります。
innerHTML
Element.innerHTML - Web API | MDN
Element オブジェクトの innerHTML プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。
要素の内容を置き換えるというより、文書に HTML を挿入するという場合には、 insertAdjacentHTML() メソッドを使用してください。
textContent
Node.textContent - Web API | MDN
textContent は Node のプロパティで、ノードおよびその子孫のテキストの内容を表します。