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

JavaScript를 사용하여 다른 요소 안에 요소를 추가하는 방법을 알아보세요.

JavaScript에는 innerHTML이라는 속성이 있습니다. 기존 요소 내부에 마크업을 바로 추가할 수 있습니다.

헤드라인이 있는 기사 헤더가 있고 바로 아래에 부제나 태그라인과 같은 중요한 메시지를 추가해야 한다고 가정해 보겠습니다.

HTML

<article>
  <header>
    <h1>Headline for your article</h1>
  </header>
</article>

자바스크립트

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

// Select h1 element inside the article element
const articleHeadline = document.querySelector('article header')

// Add content right after the h1 element
articleHeadline.innerHTML += '<p>Extra content right below the headline.</p>'

꽤 멋지죠?

h1 헤드라인 바로 아래가 아니라 바로 위에 콘텐츠를 추가해야 하는 경우 어떻게 해야 합니까?

문제 없습니다. 먼저 새 콘텐츠를 articleHeadline에 할당합니다. 변수를 선택한 다음 헤드라인 콘텐츠를 나중에 추가합니다.

articleHeadline.innerHTML = '<p>Extra content right before the headline.</p>' + articleHeadline.innerHTML