이러한 이유로 실무에서는 화면에 그때그때 태그를 추가하는 방식(append)을 잘 사용하지 않습니다. 그 대신에 최대한 화면에 존재하지 않는(메모리 안에만 존재하는) 태그에 새로운 태그를 추가하고, 마지막 한 번만 화면에 추가합니다.
앞의 코드에서는 $table 안에 다른 태그들을 추가하고 있으므로 $table을 최대한 나중에 document.body에 append()하면 됩니다.
bubbling.html
const $table = document.createElement('table');
$table.border = 1;
for (let i = 0; i < 4; i++) {
const $tr = document.createElement('tr');
$table.append($tr);
for (let j = 0; j < 4; j++) {
const $td = document.createElement('td');
$td.textContent = '칸';
$tr.append($td);
}
}
document.body.append($table);