jQuery는 개발자가 효율적으로 동적인 웹 경험을 구현할 수 있도록 다양한 메서드를 제공합니다. 그중에서 html() 메서드는 선택한 요소 내부의 모든 HTML 콘텐츠를 새로운 내용으로 교체하는 기능을 합니다. 사용자가 페이지와 상호작용한 후 화면에 표시되는 내용을 동적으로 변경하고 싶을 때 매우 유용합니다.
이 가이드에서는 html() 메서드의 개념과 문법을 살펴보고, 단계별 예제를 통해 실제 활용 방법을 알아보겠습니다. html()은 jQuery 라이브러리의 기본적이면서도 자주 사용되는 메서드이므로, 기본기를 익히면 바로 실전에 적용할 수 있습니다.
jQuery html() 메서드란?
html()은 일치하는 요소 집합 내 각 요소의 HTML 콘텐츠를 설정(교체)합니다. 원하지 않는 부분까지 변경되지 않도록, 충분히 구체적인 선택자를 지정하는 것이 중요합니다.
html()은 콘텐츠만 변경한다는 점에 유의하세요. 스타일시트가 적용되어 있다면 새로 삽입된 콘텐츠 역시 기존 콘텐츠와 동일하게 스타일링됩니다. 또한 html()은 HTML 문서에서만 작동하며 XML 문서에는 사용할 수 없습니다.
html() 메서드의 문법
jQuery 메서드는 먼저 선택자(selector)를 통해 호출된다는 점을 기억하세요. 선택자는 <p> 태그처럼 넓은 범위일 수도 있고, id를 가진 특정 <div>(<div id='main-app'></div>)처럼 좁은 범위일 수도 있습니다. 원하는 요소를 선택한 후 html()을 호출하고, HTML 문자열을 인자로 전달하면 됩니다. CSS 선택자에 대한 자세한 설명은 관련 가이드를 참고하세요.
html()은 문자열 리터럴을 직접 인자로 받거나, 문자열을 담고 있는 변수를 전달받을 수 있습니다. "새로운 콘텐츠"라는 문자열 리터럴을 직접 전달하는 것과 해당 문자열을 참조하는 변수를 전달하는 것은 동일한 결과를 냅니다.
다음과 같은 간단한 <div>가 있다고 가정해 보겠습니다:
<div class='main-content'>
<p class='paragraphOne'> Hello World </p>
</div>
<p> 태그 전체를 교체할 수 있습니다:
$('div.main-content').html('<p>New Content</p>')
위 코드를 실행하면 HTML은 다음과 같이 렌더링됩니다:
<div class='main-content'>
<p>New Content </p>
</div>
원래 <p> 태그에 스타일이 적용되어 있었다면, 새 콘텐츠에는 더 이상 그 스타일이 적용되지 않습니다. 단순 문자열만 전달할 수도 있습니다:
$('div.main-content').html('New Content')
이 경우 HTML은 다음과 같이 됩니다:
<div class='main-content'>
New Content
</div>
두 방식의 차이를 확인할 수 있습니다. 문자열 리터럴을 전달하면 기존 콘텐츠의 스타일을 유지하기 좋습니다. 반면 새 콘텐츠가 자식 요소여야 한다면 HTML 문자열을 전달하는 것이 적합합니다.
기본 문법을 살펴봤으니, 이제 실제 예제를 통해 알아보겠습니다.
html() 메서드 예제
앞선 "New Content" 예제에서 html()이 선택한 요소 내부의 콘텐츠를 어떻게 교체하는지 확인했습니다. 문자열 리터럴이나 HTML 문자열을 인자로 전달하여 구현할 수 있습니다. 이번에는 원본 스타일을 유지하면서 콘텐츠를 교체하는 예제를 살펴보겠습니다.
<head>
<style>
.blue {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<h2>
html() Demo:
</h2>
<div class='main'>
<p class='blue'>
Hello
</p>
<p>
World
</p>
<p>
Goodbye
</p>
</div>
<script>
</script>
</body>
초기 HTML 페이지를 보면 "Hello"라는 단어만 파란색으로 스타일링되어 있는 것을 확인할 수 있습니다.
이 예제에서는 "Hello"를 새로운 콘텐츠로 교체하되, 원래의 파란색 스타일을 유지하고 싶습니다. 이를 위해 blue 클래스를 가진 단락을 선택합니다.
$('p.blue').html("Hello AGAIN")
blue 클래스에 속한 단락을 선택해 "Hello"를 "Hello AGAIN"으로 교체했습니다. html()은 요소 이름으로 감싸진 콘텐츠만 교체하기 때문에 파란색 스타일은 그대로 유지됩니다.
그렇다면 모든 단락 텍스트를 교체하려면 어떻게 해야 할까요? <p> 요소를 선택하면 위의 세 단락이 모두 "Hello AGAIN"으로 교체됩니다.
$('p').html("Hello AGAIN")
여기서는 HTML 파일의 모든 단락 태그를 선택하고 각각의 콘텐츠를 "Hello AGAIN"으로 교체했습니다. 첫 번째 예제와 마찬가지로, 태그 안에 감싸진 콘텐츠만 교체되므로 원래 스타일은 그대로 유지됩니다.
예상대로 결과가 나왔습니다. 이번에는 선택자를 한 단계 위로 올려 'main' 클래스를 가진 <div>를 선택해 보겠습니다. 여기서 HTML 문자열을 인자로 전달하는 방식이 유용하게 쓰입니다.
$('div.main').html('<p class=blue>Main Div Content</p>')
메인 div 내부에는 세 개의 단락 요소가 있습니다. html()의 작동 방식을 안다면, 위 코드가 세 개의 <p> 태그를 인자로 전달된 하나의 태그로 교체한다는 것을 짐작할 수 있습니다. HTML 학습 가이드를 참고하면 이 개념을 더 깊이 이해할 수 있습니다.
단 한 줄의 코드로 세 개의 단락 요소를 교체하고, 기존 클래스 스타일까지 활용했습니다.
결론
jQuery html()은 HTML 페이지의 콘텐츠를 교체하여 동적인 경험을 만들 때 널리 사용되는 메서드입니다. html()은 HTML 요소 내부에 감싸진 콘텐츠를 교체하기 때문에, jQuery 선택자와 스타일 클래스에 주의를 기울이는 것이 중요합니다. 이를 통해 의도치 않은 스타일 변경을 방지할 수 있습니다.
지금까지 jQuery html() 메서드의 개념, 문법, 실제 활용 예제를 살펴봤습니다. 널리 사용되는 이 메서드를 직접 연습하며 확실히 익혀보세요.