[Javascript & Jquery] .html() 과 .text()

jQuery의 .html()과 .text() 메서드는 요소의 콘텐츠를 가져오거나 설정하는 데 사용되지만, 주요 차이점은 다음과 같습니다:

1. .html()

• 설명: HTML 콘텐츠를 가져오거나 설정합니다.

• 특징: 요소 내부에 있는 HTML 태그와 함께 콘텐츠를 처리합니다. 즉, HTML 태그를 포함하여 콘텐츠를 가져오거나 설정할 수 있습니다.

• 사용 예시:

<div id="example"><strong>Hello</strong> World</div>

// .html() 사용 예시

// HTML을 가져오기
var content = $('#example').html();
console.log(content);  // 출력: <strong>Hello</strong> World

// HTML을 설정하기
$('#example').html('<em>Goodbye</em> World');
// 결과: <div id="example"><em>Goodbye</em> World</div>

2. .text()

• 설명: 텍스트 콘텐츠를 가져오거나 설정합니다.

• 특징: HTML 태그를 제외한 순수 텍스트만 처리합니다. 요소 내부의 모든 HTML 태그를 무시하고 텍스트만을 가져오거나 설정합니다.

• 사용 예시:

<div id="example"><strong>Hello</strong> World</div>

// .text() 사용 예시

// 텍스트를 가져오기
var content = $('#example').text();
console.log(content);  // 출력: Hello World

// 텍스트를 설정하기
$('#example').text('Goodbye World');
// 결과: <div id="example">Goodbye World</div>

주요 차이점:

• .html(): HTML 태그와 함께 콘텐츠를 가져오거나 설정할 수 있습니다.

• .text(): 순수 텍스트만 처리하며, HTML 태그는 무시됩니다.

이 차이점에 따라 HTML 태그를 포함해서 처리해야 하는 경우에는 .html()을, 순수 텍스트만 다루고 싶을 때는 .text()를 사용하면 됩니다.