0Pricing
Frontend Academy · 강의

요소 생성 및 추가

createElement, setAttribute, append, remove를 사용해 DOM 구조를 동적으로 만들고 수정합니다.

요소 생성 및 추가은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

createElement

document.createElement(tagName)은 메모리에 새 요소를 생성하지만 아직 DOM에는 추가하지 않습니다. 그런 다음 속성을 설정하고 트리에 append합니다.

const btn = document.createElement('button');
btn.textContent = 'Click Me';
btn.classList.add('btn-primary');
btn.setAttribute('type', 'button');
// btn is in memory, not yet in the page

append와 appendChild

parent.append(child)는 부모 요소의 자식 끝에 노드나 문자열을 추가합니다. appendChild는 더 오래된 동등한 방식이지만, append는 여러 노드와 문자열을 받을 수 있어 더 유연합니다.

const list = document.querySelector('ul');
const item = document.createElement('li');
item.textContent = 'New item';
list.append(item); // adds to end of list

prepend, before, after

parent.prepend()는 시작 부분에 추가합니다. element.before()는 element 앞에 삽입합니다. element.after()는 element 뒤에 삽입합니다.

const header = document.querySelector('.card-header');
const icon = document.createElement('img');
icon.src = 'icon.svg';
header.prepend(icon); // icon goes before all other children

const divider = document.createElement('hr');
header.after(divider); // divider goes after the header

insertAdjacentHTML

element.insertAdjacentHTML(position, htmlString)은 기존 콘텐츠를 바꾸지 않고 지정한 위치에 HTML을 삽입합니다. 위치는 'beforebegin', 'afterbegin', 'beforeend', 'afterend'입니다.

const container = document.querySelector('.list');
container.insertAdjacentHTML('beforeend', `
  <li class="item">
    <span class="name">Alice</span>
  </li>
`);
// Still avoid with user input — XSS risk

cloneNode

element.cloneNode(true)는 모든 자식 요소를 포함한 element의 깊은 복사본을 만듭니다. 얕은 복사본을 만들려면 false를 전달하십시오. template element를 복제할 때 유용합니다.

const template = document.querySelector('.card-template');
const clone = template.cloneNode(true);
clone.querySelector('.card-title').textContent = 'New Card';
container.append(clone);

removeChild와 remove()

element.remove()는 DOM에서 element를 제거합니다. 이전 방식인 parent.removeChild(child)도 작동합니다. 제거된 요소도 변수에서 계속 참조할 수 있으며 다시 append할 수 있습니다.

const item = document.querySelector('.to-delete');
item.remove(); // clean modern syntax

replaceWith

oldElement.replaceWith(newElement)는 DOM에서 기존 old element를 새 element로 바꿉니다. 이전 방식인 replaceChild 패턴보다 편리합니다.

const old = document.querySelector('.old-banner');
const fresh = document.createElement('div');
fresh.className = 'new-banner';
fresh.textContent = 'Updated!';
old.replaceWith(fresh);

DocumentFragment를 이용한 일괄 삽입

DocumentFragment는 DOM에 실제로 존재하지 않는 가벼운 container입니다. 그 안에 하위 트리를 만든 다음 한 번의 작업으로 append하면 됩니다. 이렇게 하면 N번이 아니라 리플로우가 한 번만 발생합니다.

const fragment = document.createDocumentFragment();
users.forEach(user => {
  const li = document.createElement('li');
  li.textContent = user.name;
  fragment.append(li);
});
// One DOM write:
document.querySelector('ul').append(fragment);

&lt;template&gt; element

HTML <template> element는 JavaScript로 clone할 때까지 렌더링되지 않는 마크업을 담습니다. 문자열을 만들거나 화면에 표시된 요소를 복제하는 것보다 좋습니다.

<template id="card-tpl">
  <div class="card">
    <h3 class="card-title"></h3>
    <p class="card-body"></p>
  </div>
</template>

프로퍼티와 특성 설정

element 프로퍼티(el.href, el.src, el.value)는 값을 설정하는 가장 직접적이고 성능이 좋은 방법인 경우가 많습니다. 특성(setAttribute)은 대응하는 DOM 프로퍼티가 없는 사용자 지정 특성이나 ARIA 특성에 가장 적합합니다.

// Property (preferred for standard HTML attributes):
img.src = '/photo.webp';
link.href = '/about';

// setAttribute (for ARIA and custom attributes):
button.setAttribute('aria-expanded', 'true');
div.setAttribute('data-index', '3');

사용자 콘텐츠에서 innerHTML 피하기

사용자가 제공한 데이터로 element를 만들 때는 HTML 문자열을 만들고 innerHTML을 사용하는 대신 항상 DOM 메서드(createElement, textContent, setAttribute)를 사용하십시오. 사용자 입력을 HTML 문자열에 절대 삽입하지 마십시오.

// DANGEROUS:
container.innerHTML = `<p>${userComment}</p>`;

// SAFE:
const p = document.createElement('p');
p.textContent = userComment;
container.append(p);

빠른 확인

100번의 리플로우를 일으키지 않고 <ul>에 목록 항목 100개를 추가해야 합니다. 어떤 방법이 가장 좋습니까?

복습: DOM element 만들기

createElement는 메모리에서 element를 만듭니다. append/prepend/before/after는 트리에 삽입합니다. remove()는 element를 삭제합니다. DocumentFragment는 성능을 위해 삽입을 일괄 처리합니다.