html()vs text() 함수 차이점 + val()함수를 이용한 input 태그의 값 확인 추가

jQuery에서 지원되는 함수만으로 간단하게 태그값들을 확인 할수 있습니다.

그리고 반대로 원하는 값을 태그값에 적용 또한 가능합니다.

html()함수와 text() 함수 그리고 val() 함수에 대하여  

포스팅 해보도록 하겠습니다.

$("셀렉터").html()

셀렉터태그내에 존재하는 자식태그을 통째로 읽어올때 사용되는 함수

※ 태그 동적추가할때 주로 사용되는 함수

$("셀렉터").text()

셀렉터태그내에 존재하는 자식태그들 중에 html태그는 모두 제외 한 채 문자열만 출력하고자 할때 사용되는 함수

※ html태그까지 모두 문자로 인식시켜주는 함수

$("셀렉터").val()

INPUT 태그에 정의된 value속성의 값을 확인하고자 할때 사용되는 함수

위에 대한 함수들을 각 예제를 통하여 이해해보도록 하겠습니다.

1. $("셀렉터").html() 을 이용하여 태그내 값 가져오기 및 값 적용해보기

제일먼저 HTML태그를 가져와 보도록 하겠습니다.

body 태그내에 다음과 같이 코드를 작성합니다.

?

1 2 3

<div id="getTag">     <h3>11111111<br/><span>22222</span>333333333</h3> </div>

작성이 완료되셨으면 스크립트 코드를 다음과 같이 추가합니다.

?

1 2 3 4 5 6

$(function(){     var getTag = $("#getTag").html();         var getText = $("#getTag").text();     alert(getTag);         alert(getText); });

실행을 해보도록 하겠습니다.

html() 실행결과

text() 실행결과

위처럼 HTML함수는 태그를 포함한 문자열을 통째로 가져왔고 

TEXT함수는 태그를 제외한 문자열만 출력을 시켜주었습니다.

다음으로 html() 함수와 text()함수를 적용하여 

특정 레이어 영역에  HTML 태그 및 텍스트 태그를 적용해보도록 하겠습니다.

기존 body태그내에 정의해놓은 태그를 다음처럼 재작성 합니다.

?

1 2 3

<div id="getTag" style="border-width: 1px;border-style: solid;border-color: red;"></div> <br/> <div id="getText" style="border-width: 1px;border-style: solid;border-color: blue;"></div>

이어서 스크립트 코드들도 다음과 같이 재작성 해줍니다.

?

1 2 3 4 5

$(function(){     var setTag = "<input type='text'><br />텍스트태그 동적추가하기";     $("#getTag").html(setTag);     $("#getText").text(setTag); });

코드 작성 후 실행을 해보도록 하겠습니다.

빨간네모칸친 영역이 html()함수를 적용한 결과이고 

파란네모칸 영역이 text()함수 적용 결과데이터입니다.

순수하게 특정 태그내에 존재하는 태그가 문자열만 존재할경우에는

 html() 함수나 text() 함수 아무거나 사용해도 무관하지만

태그가 들어있는 경우라면 

상황에 따라서 각각의 함수들을 사용하시면 되겠습니다.

마지막으로 val() 함수를 이용하여 input 태그의 값을 가져오고 

value속성에 특정값을 set해보도록 하겠습니다.

body 태그내에 다음과 같이 코드를 재작성 해줍니다.

?

1 2 3

<input type="text" id="txt" value="텍스트값" /> <input type="password" id="pwd" value="패스워드값" /> <input type="checkbox" id="chk" value="체크박스값"/>

위처럼 다양한 종류의 input 태그들을 예를들기위해 작성하였습니다.

이제 각 태그들의 value값을 가져오도록 해보겠습니다.

?

1 2 3 4 5 6 7 8 9

$(function(){     //get value     var txtValue = $("#txt").val();     var pwdValue = $("#pwd").val();     var chkValue = $("#chk").val();     alert(txtValue);     alert(pwdValue);     alert(chkValue); });

input 태그의 value값을 각각의 변수에 담아서 alert을 이용하여 화면에 출력 시켜 보았습니다.

값을 얻어왔으면 이제 추가로 value값을 set 해보도록 하겠습니다.

기존 코드에서 input type="text"인 태그의 value를 변경해보도록 하겠습니다.

기존 스크립트 코드를 재정의 해주셔도 되고 기존코드 다음에 하단 코드를 추가해주셔도 무관합니다.

?

1	$("#txt").val("텍스트변경하기");

결과를 확인해보도록 하겠습니다.

 text태그내에 담겨있는 "텍스트값"이라는 value값이 

"텍스트변경하기" 라고 변경되는 것을 확인 할 수 있었습니다.