jquery 텍스트 값 설정 예(텍스트 상자 DIV 형식 값 설정)_jquery

jquery 내용 설정 - text(), html() 및 val()

이전 장과 동일한 세 가지 방법을 사용하여 내용을 설정합니다.

text() - 선택한 요소의 텍스트 내용을 설정하거나 반환합니다.
html() - 선택한 요소의 내용(HTML 태그 포함)을 설정하거나 반환합니다.
val() - 값을 설정하거나 반환합니다. 양식 필드

다음 예에서는 text(), 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()에도 콜백 함수가 있습니다. 콜백 함수는 선택한 요소 목록에 있는 현재 요소의 인덱스와 원래(이전) 값이라는 두 가지 매개변수를 사용합니다. 그런 다음 함수의 새 값으로 사용하려는 문자열을 반환합니다.

다음 예에서는 콜백 함수가 포함된 text() 및 html()을 보여줍니다.

예제

코드 복사 코드는 다음과 같습니다.

$("#btn1 ").click(function(){
$("#test1").text(function(i,origText){
return "이전 텍스트: " origText " 새 텍스트: Hello world!
( 색인: " i ")";
});
});

$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "이전 html: " origText " 새 html : 안녕하세요 world!
(색인: " i ")";
});
});