【JavaScript】createDocumentFragment() を使った複数要素の効率的な追加方法

JavaScript では、DOM (Document Object Model) を操作する際に、パフォーマンスを考慮した手法を使うことが重要です。その中で、createDocumentFragment() メソッドは、複数のノードを効率的にまとめて追加するための便利なツールです。本記事では、createDocumentFragment() を使用して複数の要素を一度に追加する方法をご紹介します。

createDocumentFragment() とは
複数のリストアイテムを追加する例
複数の異なる要素を追加する例
createDocumentFragment() のメリット
まとめ

createDocumentFragment() とは

createDocumentFragment() メソッドは、軽量なコンテナである DocumentFragment ノードを作成します。このフラグメントは、複数のノードを一時的にまとめるための容器として機能し、最終的に一度だけ DOM に追加することができます。この方法を利用することで、DOM 操作の効率を大幅に向上させることができます。

複数のリストアイテムを追加する例

次に、createDocumentFragment() を使用して複数のリストアイテムを効率的に追加する方法を見てみましょう。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DocumentFragment Example</title>
</head>
<body>
    <ul id="myList"></ul>

    <script>
        // DocumentFragmentを作成
        let fragment = document.createDocumentFragment();

        // 5つのリストアイテムを作成
        for (let i = 0; i < 5; i++) {
            let listItem = document.createElement('li');
            listItem.textContent = `Item ${i + 1}`;
            fragment.appendChild(listItem);
        }

        // DOMの<ul>要素にFragmentを追加
        document.getElementById('myList').appendChild(fragment);
    </script>
</body>
</html>

このコードでは、5つのリストアイテムを DocumentFragment に追加し、最後に一度だけ DOM の

複数の異なる要素を追加する例

createDocumentFragment() は、複数の異なる種類の要素をまとめて追加する場合にも便利です。以下の例では、見出し、段落、ボタンをまとめて追加します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DocumentFragment Example</title>
</head>
<body>
    <div id="container"></div>

    <script>
        // DocumentFragmentを作成
        let fragment = document.createDocumentFragment();

        // 複数の異なる要素を作成
        let header = document.createElement('h1');
        header.textContent = 'Welcome';

        let paragraph = document.createElement('p');
        paragraph.textContent = 'This is a paragraph.';

        let button = document.createElement('button');
        button.textContent = 'Click Me';

        // フラグメントに要素を追加
        fragment.appendChild(header);
        fragment.appendChild(paragraph);
        fragment.appendChild(button);

        // DOMの<div>要素にFragmentを追加
        document.getElementById('container').appendChild(fragment);
    </script>
</body>
</html>

このコードでは、DocumentFragment に異なる種類の要素を追加し、最終的に DOM の div 要素に追加しています。これにより、複数の要素を効率的に管理することができます。

createDocumentFragment() のメリット

パフォーマンスの向上: DOM に対する複数回の操作を避け、一度の操作で済むため、パフォーマンスが向上します。
コードの簡潔さ: 複数のノードを一つの操作で追加できるため、コードが簡潔になります。
操作の一貫性: ノードをフラグメントに追加してから一度だけ DOM に追加することで、操作が一貫して行えます。

まとめ

createDocumentFragment() を使用することで、複数の要素を効率的にまとめて DOM に追加することができます。パフォーマンスの向上やコードの簡潔さを実現するために、ぜひ活用してみてください。