[jQuery] 제이쿼리 내용 가져오기, 변경하기 text(), html(), val(), attr()

text(), html(), val(), attr()

text(), html(), val(), attr() 메서드는 jQuery에서 HTML 요소의 내용(content)이나 속성(attribute)을 가져오거나 변경할 때 사용된다. text()는 요소의 텍스트 내용을 가져오거나 설정하며, html()은 요소 내부의 HTML 코드를 조작할 수 있다. val()은 주로 입력 필드의 값을 다룰 때 사용되며, attr()은 특정 속성 값을 가져오거나 변경하는 데 활용된다. 이를 통해 웹 페이지의 동적인 조작이 가능해진다.

 

---

 

 

text(), 텍스트 가져오기 및 변경

HTML 요소의 텍스트 내용을 가져오거나 변경할 때 사용한다. HTML 태그를 포함하지 않고 순수한 텍스트만 가져오고 내용을 변경하면 기존 내용이 덮어쓰기 된다.

$('선택자').text();       // 요소의 텍스트 가져오기
$('선택자').text('새로운 텍스트');  // 요소의 텍스트 변경하기

예제

<p id="demo">안녕하세요! <strong>환영합니다.</strong></p>

console.log($('#demo').text()); // 출력: "안녕하세요! 환영합니다."
$('#demo').text('변경된 텍스트'); // <p> 안의 텍스트를 변경 (HTML 태그는 사라짐)

 

 

---

 

 

html(), HTML 가져오기 및 변경

HTML 요소의 내용(HTML 포함) 을 가져오거나 변경할 때 사용한다. 기존 HTML 태그를 유지하면서 가져올 수 있고, 내용을 변경할 때 HTML 태그도 적용된다.

$('선택자').html();        // 요소의 HTML 가져오기
$('선택자').html('<b>새로운 HTML</b>');  // 요소의 HTML 변경

예제

<p id="demo">안녕하세요! <strong>환영합니다.</strong></p>

console.log($('#demo').html()); // 출력: "안녕하세요! <strong>환영합니다.</strong>"
$('#demo').html('<i>새로운 내용</i>'); // <p> 안의 내용을 변경 (HTML 포함)

 

 

text() vs html() 차이점

두 메서드는 HTML 요소의 내용을 가져오거나 변경하는 역할을 하지만, HTML 태그 처리 방식이 다르다. text()는 요소 안의 순수한 텍스트만 가져오거나 변경할 때 사용하고 HTML 태그가 있으면 태그를 제거하고 텍스트만 반환한다. 

그러나 html()요소는 요소 안의 HTML 구조를 포함하여 가져오거나 변경한다. HTML 태그가 있으면 태그까지 그대로 반환하고, 변경하면 HTML 태그도 적용된다.

$('#demo').text('<b>굵은 텍스트</b>');  
// 결과: <p>&lt;b&gt;굵은 텍스트&lt;/b&gt;</p> (태그가 문자 그대로 표시됨)

$('#demo').html('<b>굵은 텍스트</b>');  
// 결과: <p><b>굵은 텍스트</b></p> (태그가 적용됨)

 

 

---

 

val(), 입력 필드의 값 가져오기 및 변경

val은 value의 약자를 말한다. <input>, <textarea>, <select> 요소에서만 사용 가능하고 입력 필드 값(value) 을 가져오거나 변경할 때 사용한다. val()은 사용자의 입력값을 가져오거나 변경할 때 유용하다.

$('선택자').val();          // 입력 필드의 값 가져오기
$('선택자').val('새로운 값');  // 입력 필드의 값 변경하기

예제

<input type="text" id="username" value="홍길동">

console.log($('#username').val()); // 출력: "홍길동"
$('#username').val('이순신'); // 입력 필드의 값 변경

 

 

text() / html() 과 val() 차이점

text()는 요소의 순수한 텍스트만 가져오거나 변경하며, HTML 태그는 제거된다. html()은 요소의 HTML을 포함한 내용을 가져오거나 변경하여, 태그를 유지하고 적용할 수 있다. 반면, val()은 <input>, <textarea>, <select> 같은 입력 필드의 값을 가져오거나 변경하는 데 사용되며, 일반적인 HTML 요소에는 적용되지 않는다.

<p id="demo">안녕하세요!</p>
<input type="text" id="username" value="홍길동">

console.log($('#demo').text()); // 출력: "안녕하세요!"
console.log($('#username').val()); // 출력: "홍길동"

text() → <p> 같은 일반 요소에서 텍스트 가져오기
val() → <input> 같은 입력 필드에서 값 가져오기

 

---

 

attr(), 속성(attribute) 가져오기 및 변경

HTML 요소의 속성(attribute) 값을 가져오거나 변경할 때 사용한다. src, href, alt, id, class, title 같은 속성을 가져오거나 변경할 수 있고 속성을 변경하면 새로운 값으로 덮어쓰기된다.

$('선택자').attr('속성명');            // 속성 값 가져오기
$('선택자').attr('속성명', '새로운 값');  // 속성 값 변경하기

예제

<img id="myImage" src="old.jpg" alt="이미지 설명">

console.log($('#myImage').attr('src')); // 출력: "old.jpg"
$('#myImage').attr('src', 'new.jpg'); // 이미지 변경

attr() 사용 예시

<a id="link" href="https://google.com">Google</a>

console.log($('#link').attr('href')); // 출력: "https://google.com"
$('#link').attr('href', 'https://naver.com'); // 링크 변경

속성 여러 개 변경 시

$('#myImage').attr({
    'src': 'new.jpg',
    'alt': '새로운 이미지'
});