콘텐츠 및 속성 설정

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 + ")";
  });
});

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기