
콘텐츠 및 속성 설정
jQuery로 콘텐츠를 설정하는 방법을 알아보자.
콘텐츠 설정 – text(), html() 및 val()
세 가지 방법을 사용하여 콘텐츠를 설정한다.
- text()- 선택한 요소의 텍스트 내용을 설정하거나 반환한다.
- html()- 선택한 요소(HTML 마크업 포함)의 내용을 설정하거나 반환한다.
- val()- 양식 필드의 값을 설정하거나 반환한다.
예제
$("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("Hello world!"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); });
기본 예시
예제 보기text(), html() 및 val()에 대한 콜백 함수
위의 세 가지 jQuery 메서드(text(), html() 및 val()) 모두 콜백 함수와 함께 제공된다.
콜백 함수에는 선택한 요소 목록의 현재 요소 인덱스와 원래(이전) 값이라는 두 가지 매개변수가 있다.
그런 다음 함수에서 새 값으로 사용하려는 문자열을 반환한다.
예제
$("#btn1").click(function(){ $("#test1").text(function(i, origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i, origText){ return "Old html: " + origText + " New html: Hello world! (index: " + i + ")"; }); });
기본 예시
예제 보기참고
W3C School - jQuery HTML - Set Content and Attributes
jQuery 시작하기