JavaScript에서 append와 innerHTML의 차이 성능, 보안, 활용법 완전 정복

JavaScript는 DOM 조작의 핵심 도구로, 동적인 웹사이트를 만들기 위해 필수적인 언어입니다. 특히 append()와 innerHTML은 웹 요소에 콘텐츠를 추가하는 데 자주 사용되지만, 이 두 방법은 사용 목적과 특성, 성능, 보안성 등에서 큰 차이를 보입니다. 이 글에서는 JavaScript에서 append()와 innerHTML의 근본적인 차이점, 사용 시 주의사항, 최적화 전략을 포괄적으로 다룹니다.

append와 innerHTML 차이점의 본질

append()는 DOM 요소 중심의 메서드

append()는 Node 객체에 새 자식 노드를 추가할 수 있도록 설계된 메서드입니다. 이 메서드는 문자열뿐 아니라 DOM 요소 자체도 추가할 수 있으며, 기존 자식 노드는 그대로 유지됩니다.

const div = document.createElement('div');
div.append(document.createElement('span'));

innerHTML은 HTML 마크업 문자열 중심의 속성

innerHTML은 요소 내부의 HTML 마크업 전체를 문자열로 설정하거나 가져올 수 있는 속성입니다. 새 콘텐츠를 삽입하면 기존 내용은 완전히 삭제되며, HTML 파서가 다시 작동해 내부 요소를 새로 렌더링합니다.

div.innerHTML = '<span>텍스트</span>';

반응형

성능 관점에서 본 append와 innerHTML의 차이

append는 효율적인 요소 추가에 적합

• DOM 요소를 생성하고, append()로 추가하는 경우 브라우저는 요소를 하나하나 처리하여 직접 DOM에 추가합니다.
• HTML 파싱이 필요 없으므로 자바스크립트 렌더링 성능이 상대적으로 뛰어납니다.

let list = document.getElementById('list');
let item = document.createElement('li');
item.textContent = '목록 항목';
list.append(item);

innerHTML은 대량 콘텐츠 삽입에 유리하지만 리렌더링 비용 큼

• 다수의 요소를 한 번에 삽입할 경우 innerHTML이 직관적이고 간단합니다.
• 그러나 내부 HTML을 완전히 덮어쓰기 때문에 이전의 DOM 트리를 모두 파기하고 재생성해야 하므로 퍼포먼스 비용이 큽니다.

list.innerHTML = '<li>항목1</li><li>항목2</li><li>항목3</li>';

반응형

보안성과 안정성

innerHTML은 XSS 공격에 취약

• 외부로부터 입력된 문자열을 필터링 없이 innerHTML로 삽입하면, 악성 스크립트가 실행될 수 있습니다.

let comment = '<img src="x" onerror="alert(\'XSS\')">';
div.innerHTML = comment; // 위험한 접근 방식

• 반드시 입력값을 필터링하거나, HTML 특수 문자를 escape 처리해야 합니다.

append는 DOM 요소 단위라 상대적으로 안전

• 직접 DOM 요소를 생성해 삽입하기 때문에 스크립트 삽입이 어렵고, XSS에 강합니다.

let span = document.createElement('span');
span.textContent = comment;
div.append(span); // 안전한 처리 방식

반응형

호환성과 지원 여부

append는 IE에서는 미지원

• append()는 ES2019 이후 표준화된 메서드로, 구형 브라우저(특히 IE)에서는 지원되지 않습니다.
• IE 호환성이 중요한 프로젝트에서는 appendChild() 사용이 권장됩니다.

element.appendChild(child); // 구형 브라우저 호환

innerHTML은 대부분의 브라우저에서 지원

• 매우 오래전부터 사용되었기 때문에 브라우저 호환성이 높습니다.
• 구형 프로젝트에서도 안정적으로 사용 가능.

반응형

append와 innerHTML 활용 예시

동적 리스트 생성

append 사용 예

const list = document.getElementById('list');
for(let i = 0; i < 5; i++) {
  let li = document.createElement('li');
  li.textContent = `아이템 ${i}`;
  list.append(li);
}

innerHTML 사용 예

let html = '';
for(let i = 0; i < 5; i++) {
  html += `<li>아이템 ${i}</li>`;
}
list.innerHTML = html;

이벤트 리스너 적용 시 append가 유리

• DOM 요소에 직접 이벤트를 부착할 수 있으므로 제어가 쉬움.

let button = document.createElement('button');
button.textContent = '클릭';
button.addEventListener('click', () => alert('클릭됨'));
div.append(button);

반응형

append와 innerHTML 선택 가이드라인

append가 적합한 경우

• DOM 요소에 직접 접근하거나 이벤트를 부착해야 할 때
• 외부 입력 데이터를 안전하게 삽입해야 할 때
• 구체적인 제어가 필요한 경우

innerHTML이 적합한 경우

• HTML 마크업이 복잡하고 문자열로 대량 삽입해야 할 때
• 성능보다 코드 간결성이 우선일 때
• 리렌더링이 문제되지 않는 정적 페이지에 사용 시

반응형

실무 개발에서의 권장 패턴

컴포넌트 기반 개발에서는 append 선호

React, Vue, Svelte 등 모던 프레임워크에서는 innerHTML을 거의 사용하지 않습니다. 보안, 성능, 제어 측면에서 DOM 요소를 직접 조작하는 방식이 더 안정적이기 때문입니다.

function renderCard(title, description) {
  const card = document.createElement('div');
  const h3 = document.createElement('h3');
  h3.textContent = title;
  const p = document.createElement('p');
  p.textContent = description;
  card.append(h3, p);
  return card;
}

템플릿 문자열이 필요한 경우 innerHTML 고려

이메일 콘텐츠 생성, 서버에서 전달받은 HTML 조각을 렌더링하는 경우는 innerHTML이 유리합니다. 단, 반드시 신뢰할 수 있는 콘텐츠에만 적용해야 합니다.

div.innerHTML = response.htmlSnippet;

반응형

append vs innerHTML, 무엇을 선택할 것인가?

구분 append innerHTML

콘텐츠 타입	DOM 요소 및 문자열	HTML 문자열
기존 콘텐츠 유지	유지됨	초기화됨
보안성	높음 (XSS 안전)	낮음 (주의 필요)
성능	빠름 (요소 단위)	느림 (전체 리렌더링)
브라우저 호환성	IE 미지원	광범위한 지원
사용 용도	동적 요소 추가	마크업 삽입 중심

반응형

결론

append()와 innerHTML은 비슷해 보이지만, 그 사용 목적과 구현 방식에는 확연한 차이가 있습니다. 보안성과 성능, 호환성, 유지보수성을 모두 고려할 때, 어떤 메서드를 사용할 것인지는 프로젝트의 성격과 우선순위에 따라 달라져야 합니다. 특히 동적 웹 애플리케이션이나 사용자 입력이 많은 환경에서는 append()를 통한 DOM 직접 조작이 바람직하며, 정적인 템플릿을 단순 삽입하는 경우 innerHTML을 고려할 수 있습니다.