$$config title: [js] .val() .text() .html() keywords: - IT - javascript $$ [참고](https://secretroute.tistory.com/entry/jQuery-val-text-html%EC%9D%98-%EC%B0%A8%EC%9D%B4) [참고](https://yulfsong.tistory.com/37) [예시참고](https://homzzang.com/b/jquery-25) # .val() ```js $(셀렉터).val() $(셀렉터).val(value) // Form Element의 Value 값을 Set할 때 주로 쓰인다. ``` input태그에 정의된 value속성의 값을 확인하고자할때 사용 Form Element 의 값을 받아오는데 쓰인다. Form Element 이외의 값은 받아오질 못한다 # .text() ```js $(셀렉터).text() $(셀렉터).text(value) // Set 하기위해 쓰인다. ``` 셀렉터 하위에 있는 자식 태그들의 문자열만 출력 XML과 HTML 문서에서 둘다 사용될 수 있다. input elements 의 value를 받아오지 못한다 # .html() ```js $(셀렉터).html() $(셀렉터).html(value) // Set 하기위해 쓰인다. ``` 셀렉터 하위에 있는 자식 태그들을 태그나 문자열 따질 것 없이 전부 가져온다. html code(contents)자체를 get한다. # 예시 ```html // .text() .html()

Homzzang.com is best.

//.val()

Name:

//.attr()

Homzzang.com

``` ```js $(document).ready(function(){ $("#hz1").click(function(){ alert("Text: " + $("#homzzang").text()); // 결과: Text: Homzzang.com is best. }); $("#hz2").click(function(){ alert("HTML: " + $("#homzzang").html()); // 결과: HTML: Homzzang.com is best. }); $("button").click(function(){ alert("Value: " + $("#site").val()); // 결과: Value: Homzzang.com }); $("button").click(function(){ alert($("#hz").attr("href")); // 결과값: https://homzzang.com }); }); ```

게시글 상세