[jQuery] .html() - 선택한 요소의 html 요소를 반환, 변환하는 메서드

안녕하세요. 경제적, 시간적 자유를 꿈꾸는 한량입니다.

jQuery의 .html() 사용법

jQuery의 .html()는 요소의 HTML 콘텐츠를 가져오거나 설정하는 데 사용됩니다.

 

1.  요소의 HTML 콘텐츠를 가져오기

다음과 같이 id가 "example"인 요소의 HTML 콘텐츠를 가져올 수 있습니다.

// javascript code
var htmlContent = $('#example').html();

// html code
<div id="example">안녕하세요!</div>

이렇게 하면 'id'가 'example'인 HTML 요소인 '안녕하세요!'를 'htmlContent' 변수에 할당합니다.

 

2.  요소의 HTML 콘텐츠를 변경하기

다음과 같이 id가 "example"인 요소의 HTML 콘텐츠를 변경할 수 있습니다.

// javascript code
$('#example').html('<p>새 HTML 콘텐츠</p>');

// 기존 html code
<div id="example">안녕하세요!</div>

// 변경된 html code
<div id="example"><p>새 HTML 콘텐츠</p></div>

이렇게 하면 id가 'example'인 요소의 HTML 콘텐츠가 '<p>새 HTML 콘텐츠</p>'로 변경됩니다.

 

.html() 메서드를 사용하여 요소의 HTML 콘텐츠를 변경하면, 
해당 요소의 기존 콘텐츠가 새로운 HTML 콘텐츠로 대체됩니다. 
이것은 요소에 연결된 이벤트 핸들러나 데이터가 모두 제거된다는 것을 의미합니다.

 

.html() 메서드는 웹 페이지의 콘텐츠를 동적으로 업데이트하거나
AJAX를 통해 서버에서 반환된 HTML 콘텐츠를 사용하여

 페이지를 업데이트하는 데 유용합니다.