jQuery 내용 및 속성 설정

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

저희는 이전 장에서 소개한 세 가지 동일한 메서드를 통해 내용을 설정할 것입니다:

  • text() - 선택된 요소의 텍스트 내용을 설정하거나 반환
  • html() - 선택된 요소의 내용(HTML 표시를 포함)을 설정하거나 반환
  • val() - 폼 필드의 값을 설정하거나 반환

아래의 예제는 text(), html() 및 val() 메서드를 통해 내용을 설정하는 방법을 보여줍니다:

예제

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#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 "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});
$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

자신이 직접 시도해보세요

속성 설정 - attr()

jQuery attr() 메서드는 속성 값을 설정/변경하기도 합니다.

다음 예제는 링크의 href 속성 값을 변경(설정)하는 방법을 보여줍니다：

예제

$("button").click(function(){
  $("#w3s").attr("href","http://www.codew3c.com/jquery");
});

자신이 직접 시도해보세요

attr() 메서드는 여러 속성을 동시에 설정할 수도 있습니다.

다음 예제는 href와 title 속성을 동시에 설정하는 방법을 보여줍니다：

예제

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.codew3c.com/jquery",
    "title" : "CodeW3C.com jQuery 튜토리얼"
  });
});

자신이 직접 시도해보세요

attr() 호출 함수

jQuery 메서드 attr()는 호출 함수도 제공합니다. 호출 함수는 두 개의 매개변수를 가집니다: 선택된 요소 목록에서 현재 요소의 인덱스와 원래(旧行) 값. 그런 다음 함수의 새 값으로 문자열을 반환합니다.

다음 예제는 호출 함수를 포함한 attr() 메서드를 보여줍니다：

예제

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});

자신이 직접 시도해보세요

jQuery HTML 참조 매뉴얼

jQuery HTML 메서드의 전체 내용에 대해 알고 싶다면 다음 참조 매뉴얼을 방문하세요：