JavaScript innerHTML로 요소 내부에 마크업 추가하는 방법

JavaScript를 사용하면 기존 요소 내부에 새로운 마크업을 손쉽게 추가할 수 있습니다. 이 글에서는 innerHTML 속성을 활용하는 방법을 알아봅니다.

JavaScript에는 innerHTML이라는 속성이 있어서, 이미 존재하는 요소 내부에 마크업을 아주 간단하게 추가할 수 있습니다.

예를 들어, 헤드라인이 포함된 아티클 헤더가 있다고 가정해 보겠습니다. 그리고 그 바로 아래에 부제목이나 태그라인 같은 중요한 메시지를 추가해야 한다면 어떻게 해야 할까요?

HTML 구조

<article>
  <header>
    <h1>아티클의 헤드라인</h1>
  </header>
</article>

JavaScript로 콘텐츠 추가하기

이제 h1 헤드라인 바로 뒤에 태그라인용 HTML 마크업을 추가해 보겠습니다.

// article 요소 안에서 header 요소 선택
const articleHeadline = document.querySelector('article header')

// h1 요소 뒤에 콘텐츠 추가
articleHeadline.innerHTML += '<p>헤드라인 바로 아래에 들어가는 추가 콘텐츠.</p>'

꽤 간단하죠? += 연산자를 사용하면 기존 콘텐츠를 유지한 채 새로운 마크업을 뒤에 덧붙일 수 있습니다.

헤드라인 위에 콘텐츠 추가하기

그렇다면 반대로, h1 헤드라인 아래가 아니라 위쪽에 콘텐츠를 추가하려면 어떻게 해야 할까요?

방법은 간단합니다. 먼저 새로운 콘텐츠를 할당한 다음, 기존 헤드라인 콘텐츠를 그 뒤에 붙여주면 됩니다.

articleHeadline.innerHTML = '<p>헤드라인 바로 위에 들어가는 추가 콘텐츠.</p>' + articleHeadline.innerHTML

이처럼 문자열 연결 순서만 바꾸면 원하는 위치(앞 또는 뒤)에 자유롭게 마크업을 삽입할 수 있습니다.

참고: insertAdjacentHTML 활용하기

innerHTML 외에도 insertAdjacentHTML() 메서드를 사용하면 더 명확하게 위치를 지정할 수 있습니다. 예를 들어 'afterbegin', 'beforeend' 같은 옵션으로 요소의 시작 또는 끝 지점에 정확히 삽입할 수 있어, 대량의 DOM 조작 시 성능 면에서도 유리합니다.