公開日: 2024-02-15
タグ: HTML, JavaScript
著者: ダーシノ(@bc_rikko)

DocumentFragmentで余計な要素を作らない

DocumentFragmentを使うことで余計なcontainer要素を抑制できる。

イメージ的にはJSXの<></>と同じ。

普通に実装すると…

const container = document.createElement('div')
const title = document.createElement('h1')
...
container.appendChild(title)
document.body.appendChild(container)

// ↓↓↓

<body>
  <div> {/*← コレいらない！！！！ */}
    <h1>div絶許マン</h1>
  </div>
</body>

DocumentFragmentを使うと…

const fragment = new DocumentFragment()
const title = ...
...
fragment.appendChild(title)
document.body.appendChild(fragment)

// ↓↓↓

<body>
  <h1>div絶許マン</h1>
</body>