$table처럼 명확한 부모 태그가 없는 경우도 있습니다. 그럴 때는 documentFragment라는 가상의 태그를 활용할 수 있습니다. document.createDocumentFragment 메서드로 메모리 안에서만 존재하는 documentFragment를 만들고, documentFragment 안에 필요한 태그를 추가한 뒤 마지막으로 부모 태그에 documentFragment를 추가하는 방식을 사용합니다. 이 방식은 documentFragment를 추가할 때만 화면을 다시 그리므로 성능에 큰 도움이 됩니다.

bubbling.html

const $button = document.createElement('button');
const $img = document.createElement('img');
const $fragment = document.createDocumentFragment();
$fragment.append($button, '텍스트', $img);
document.body.append($fragment); // button, 텍스트, img가 body에 추가됨