이번에는 4행 4열의 테이블을 자바스크립트만으로 만들어 보겠습니다.
bubbling.html
<script>
const $table = document.createElement('table');
document.body.append($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);
}
}
</script>
이 코드는 잘 돌아가지만 한 가지 단점이 있습니다. 바로 append()를 호출할 때마다 HTML 화면을 다시 그린다는 점입니다. table 태그에서 한 번, tr 태그에서 4번, td 태그에서 16번까지 총 21번 화면을 다시 그립니다. 너무 빠르게 그려서 눈치챌 수 없지만, 나중에 append()를 더 많이 호출하면 성능에 문제가 생길 수 있습니다.