DocumentFragmentオブジェクトでノードを追加

DocumentFragmentオブジェクトでDOMツリーを作成できます。ノードをその都度追加するのではなく、DocumentFragmentオブジェクトを作成し、DOMツリーに複数のノードを追加したあとで、オブジェクトを追加することで画面の位置調整などの計算を最小限にすることができます。

<div class="wrapper"></div>

const target = document.querySelector(".wrapper");

let divElement = document.createElement('h1');
let pElement = document.createElement('p');
divElement.append(document.createTextNode('タイトル'));
pElement.append(document.createTextNode('テキスト'));

const fragment = new DocumentFragment();

fragment.append(divElement)
fragment.append(pElement)

console.log(fragment);
target.append(fragment);

結果

<div class="wrapper">
  <h1>タイトル</h1>
  <p>テキスト</p>
</div>

fragmentを一度にHTML上に追加することで、ブラウザ側のレンダリング処理は1回で済むので、パフォーマンスの改善になります。

参考