piayo's blog

はっさみYO! 沖縄でまったりWeb制作

for内DOM構築

DOM操作の最適化によるJavaScriptチューニング(前編)
http://html5experts.jp/yoshikawa_t/1888/

innerHTML += ... な書き方について
http://d.hatena.ne.jp/teramako/20130905/p1

insertAdjacentHTMLってのがあるのか...。使ったことない。

DOM構築パフォーマンスと脆弱性に気を使うので、人によって手法や好みが違うと思うので気になる話題ですね。

新米の俺がforでDOM構築時は(セキュリティ考慮順で)、

  1. 簡単なhtml構造の時はcreateElement, appendChildを使う。
  2. 少々複雑な時はarray.push(str)、最後にinnterHTML=array.join();
  3. 複雑な時はstr+=htmlで最後にinnterHTML=str

かなぁ。ケースバイケース。参考:http://jsfiddle.net/piayo/PjPzK/

次回の記事が気になる。