銀河鉄道

月うさぎBlog

【JavaScript】HTMLにDOMツリー作成｜createDocumentFragment

記事更新日：2022-09-04

サムネイル
fragmentでタグを動的追加

同じタグをいくつも複製したいとき、fragmentで一回だけDOMツリーにアクセスする

Document.createDocumentFragment()

新しい空の DocumentFragment を作成し、そこに DOM ノードを追加して画面外の DOM ツリーを作成します。

参照：
MDN

JavaScript：createDocumentFragment

何回繰り返すかをcountに設定する

const count = 7;

//fragment作成
const fragment = document.createDocumentFragment();

for (i = 0; i < count; i++) {
  let sector = document.createElement('div');
  sector.className = "sector";

  // ☆☆fragmentにタグ追加
  fragment.appendChild(sector);

  let rotate = document.createElement('div');
  rotate.className = "rotate";
  sector.appendChild(rotate);

  let falling = document.createElement('div');
  falling.className = "falling";
  rotate.appendChild(falling);

  let lineBox = document.createElement('div');
  lineBox.className = "line-box";
  falling.appendChild(lineBox);

  let line = document.createElement('div');
  line.className = "line-box__line c-ball c-glass--yellow";
  lineBox.appendChild(line);
}

// ☆☆親ノード定義
const parent = document.getElementById('js-sector');

// ☆☆fragmentを親ノードに追加
parent.appendChild(fragment);

作成されたDOMツリー

<div class="c-falling-box" id="js-sector">

    // ↓ここから
    <div class="sector">
        <div class="rotate">
            <div class="falling">
                <div class="line-box">
                    <div class="line-box__line c-ball c-grass--yellow"></div>
                </div>
            </div>
        </div>
    </div>
    // ↑ここまでがcount分だけ繰り返される

</div>

実際のソースコードには、id部分のみ記述

<div class="c-falling-box" id="js-sector"></div>

一行だけ追加すれば、どこにでも同じものが作られる

CSSでスタイリングした結果はこちら

著者

author
月うさぎ

2022-09-04

編集後記：
この記事の内容がベストではないかもしれません。