innerHTMLよりもinsertAdjacentHTMLのほうが動作が早いらしい
insertAdjacentHTML() は、第二引数で指定するテキストを HTML または XML としてパースし、その結果であるノードを DOM ツリー内の指定された位置(第一引数で指定)に挿入します。これは挿入先の要素を再度パースするものではないため、既存の要素や要素内部の破壊を伴いません。余分なシリアル化のステップを回避できる分、 innerHTML への代入による直接的な操作よりもはるかに高速な動作となります。
タイトルと上の引用のとおり、insertAdjacentHTMLは高速に動作するらしい。 今後JSでHTMLを要素に追加したいときはこちらを使いたい。
JSで要素を追加するのを勉強がてらjsFiddleに書いたので、ここにメモ。
https://jsfiddle.net/meeech1202/nm87L346/28/
これに近いことができなくて力不足を感じたので反省……
JSつよくなりたい。