documet.createElementしたDOMをdocument.writeする時に便利な方法

背景

本当は document.write したくないですが、さまざまな事情で document.write しなければならない状況で、
大量のDOMをdocument.writeしたい時に、何かいい方法がないか調べました。

やったこと

document.write する時に、レンダリングしたいDOMを string で書くのが辛かったので、いい方法がないか調べた結果、
document.createElement した後に、その中のhtmlを取得して、 document.write することにしました。

コード

document.createElement した要素の outerHTMLdocument.write してます。

速度比較

DOMをstringで書いて、 document.write する処理と比較してみました。

結果的には、素直にDOMを書いた方法が早いです。

方法 速度
1 4.8ms
2 0.8ms

検証環境は、macOS Sierra(10.12.4)のChrome59.0.3071.109です。

まとめ

素直にDOMを書いた方が早いですが、エスケープとか間違うので、大量にDOMを扱いたい場合は、ありかもです。
ただ、実行速度が遅くなるので、どうしてもやりたい場合のみおすすめです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です