[JavaScript] HTML에 반복된 요소 추가(DocumentFragment와 append(...Array))

jjee·2025년 9월 18일

JavaScript append(...Array)documentFragment

JavaScript

목록 보기

10/12

HTML에 반복된 요소 추가

자바스크립트의 for문을 이용해서 여러개의 엘리먼트를 body에 추가하는 방법을 다양하게 알아보자.

element를 바로 추가

const main = document.querySelector("main");

for (let i = 0; i < 10; i++) {
  const figure = document.createElement("figure");
  figure.innerHTML = `<img
src="https://i.ytimg.com/vi/OebUwWL0QMY/mqdefault.jpg"
alt="주인의 손을 보고 함께 손을 벌린 아기 고양이"
/>
<figcaption>고양이가 깜짝 놀란 듯이 앞발을 활짝 벌리고 있다</figcaption>`;
  figure.append(img, figcaption);
  
  main.append(figure);
}

for문을 돌리면서 element를 만들어 바로바로 추가하는 방법이다.
이 방법은 매우 비효율적이며 사용하지 않는 것을 권장한다.

왜 비효율적인가요?
main 태그 내부에 10번의 figure 태그를 append 한다는 것은, 10번의 DOM 접근이 발생한다는 것이다.
리플로우/리페인트 현상이 여러번 일어날 수 있기 때문에 비효율 적이다.

append(...Array) 방식

const main = document.querySelector("main");
const figArray = [];

for (let i = 0; i < 10; i++) {
  const figure = document.createElement("figure");
  figure.innerHTML = `<img
src="https://i.ytimg.com/vi/OebUwWL0QMY/mqdefault.jpg"
alt="주인의 손을 보고 함께 손을 벌린 아기 고양이"
/>
<figcaption>고양이가 깜짝 놀란 듯이 앞발을 활짝 벌리고 있다</figcaption>`;
  figArray.push(figure);
}
main.append(...figArray);

배열에 담아두었다가 스프레드 연산자(...)를 이용하여 한 번에 추가하는 방법이다.

주의
배열을 main 태그에 추가할 때 figArray.forEach((fig) => main.append(fig));와 같이 작성을 하게 되면 앞서 소개한 방법과 큰 차이가 없다.
여러개의 자식 요소를 추가할 수 있는 append 함수와 배열 내부에 있는 값을 하나씩 풀어내듯 사용할 수 있는 스프레드 연산자(...)의 특성을 이용하여 DOM 조작이 한 번만 일어날 수 있도록 해야 한다.

DocumentFragment 방식

const main = document.querySelector("main");
const frag = document.createDocumentFragment();

for (let i = 0; i < 10; i++) {
  const figure = document.createElement("figure");
  figure.innerHTML = `<img
src="https://i.ytimg.com/vi/OebUwWL0QMY/mqdefault.jpg"
alt="주인의 손을 보고 함께 손을 벌린 아기 고양이"
/>
<figcaption>고양이가 깜짝 놀란 듯이 앞발을 활짝 벌리고 있다</figcaption>`;
  frag.append(figure);
}
main.append(frag);

element 요소를 가상의 컨테이너(DocumentFragment)에 쌓아둔 후 한 번에 추가하는 방법이다.
DocumentFragment는 실제 DOM이 아닌 메모리상 가짜 DOM으로, DocumentFragment에 append 하더라도 리플로우/리페인트가 발생하지 않는다.