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>