単一要素
document.createElement(TAG_NAME)で好きなHTML要素を１つ作れます。例えば、document.createElement('div')であれば<div />要素が、document.createElement('a')であれば<a />要素が作られます。
複数要素
document.createRange().createContextualFragment(HTML)を使うとネストした断片ドキュメントを取得できます。断片ドキュメントとは、最初ページには１つのDOMだけしか存在しませんが、そのDOMとは関係ない（影響を与えない）完全に新しい構造のDOMを作ることができ、そのDOMの事を断片ドキュメントと言います。
素の断片ドキュメントはdocument.createContextualFragment()から作成することができ、その場合このドキュメントへ上記の単一要素を追加していく方法でDOMを構築必要があります。ここでdocument.createRange().createContextualFragment(HTML)を使っているのは、使用時に渡したHTMLによってDOMを自動構築してくれる為です。
つまり以下は、
const fragment = document.createDocumentFragment();
const div = document.createElement('div');
div.textContent = 'div';
const span = document.createElement('span');
span.textContent = 'span';
div.appendChild(span);
fragment.appendChild(div);このように書き換えることができます。
const fragment = document.createRange().createContextualFragment(
'divspan'
)イベントなどを登録する必要がある場合もネストが浅い場合は使ったほうが便利です。querySelectorが使えるのでそれで取得して設定するといいと思います。
### 要素を DOM に追加
要素でも断片ドキュメントでもDOMへ要素を追加するメソッドに渡してあげるだけです。
document.body.appendChild(div);
document.body.insertBefore(
document.createRange().createContextualFragment('aaaaaa'),
document.body.children[0],
);
DOM 追加後の注意
断片ドキュメント内の要素は完全に無くなり、追加後はquerySelectorなどで要素を取得できなくなるので、必要な要素は先に取得するなどするといいと思います。
