javascript createDocumentFragmentでまとめてhtml要素を作成する

javascript createDocumentFragmentでまとめてhtml要素を作成する

javascriptで、createDocumentFragmentを使用して、まとめてhtml要素を作成するサンプルコードを掲載してます。ブラウザはchromeを使用しています。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

createDocumentFragment使い方

createDocumentFragmentを使用すると、まとめてhtml要素を作成することが可能です。

createDocumentFragment使い方

実行結果をみると、html要素が追加されていることが確認できます。

やってることは、以下のコードと同じですが「createDocumentFragment」はまとめてDOM操作できる分、パフォーマンスは良いとされます。

また、以下のコードを、

document.getElementByIdの省略化やforEach、アロー関数化を使用して、簡潔に記述することもできます。

サンプルコード

以下は、
「要素追加」ボタンをクリックして、まとめてランダムな5個の整数を表示する要素を追加する
サンプルコードとなります。

※cssには「tailwind」を使用して、アロー関数で関数は定義してます。

まとめて要素が追加されていることが確認できます。