이전 페이지와 동일한 세 가지 메서드를 사용하여 콘텐츠를 설정합니다.

• text() - 선택한 요소의 텍스트 콘텐츠를 설정하거나 반환합니다.
• html() - 선택한 요소 (HTML 마크업 포함)의 콘텐츠를 설정하거나 반환합니다.
• val() - 폼 필드의 값을 설정하거나 반환합니다.

다음 예제는 jQuery text(), html() 및 val() 메서드를 사용하여 콘텐츠를 설정하는 방법을 보여줍니다.

    $(document).ready(function () {
      $("#btn1").click(function () {
        $("#test1").text("Hello World!!!");
      });
      $("#btn2").click(function () {
        $("#test2").html("<b>Hello World!!<b>");
      });
      $("#btn3").click(function () {
        $("#test3").val("Holy God!!!");
      });
    });

위의 세 가지 jQuery 메서드인 text(), html() 및 val()도 모두 콜백 함수와 함께 제공됩니다.
콜백 함수에는 두 개의 매개 변수 - 선택한 요소 목록에 있는 현재 요소의 인덱스(index)와 원래(이전) 값 - 가 있습니다:
그런 다음 함수에서 새 값으로 사용할 문자열을 반환합니다.

다음 예제는 콜백 함수가 있는 text() 및 html()을 보여줍니다.

    $(document).ready(function () {
      $("#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 + ")";
        });
      });
    });

jQuery attr() 메서드는 속성 값을 설정/변경하는 데도 사용됩니다.

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

    $(document).ready(function () {
      $("button").click(function () {
        $("#w3s").attr("href", "https://www.w3schools.com/jquery/");
      });
    });

attr() 메서드를 사용하면 동시에 다수의 속성들을 설정할 수도 있습니다.

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

    $(document).ready(function () {
      $("button").click(function () {
        $("#w3s").attr({
          "href": "https://www.w3schools.com/jquery/",
          "title": "W3Schools jQuery Tutorial"
        });
      });
    });

jQuery 메서드 attr()도 콜백 함수와 함께 제공됩니다.
콜백 함수에는 두 개의 매개 변수가 있습니다.
선택한 요소 목록에서 현재 요소의 인덱스와 원래(이전) 속성 값입니다.
그런 다음 함수에서 새 속성 값으로 사용할 문자열을 반환합니다.

다음 예제는 콜백 함수가 있는 attr()을 보여줍니다.

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

모든 jQuery HTML 메서드에 대한 전체 개요를 보려면, jQuery HTML/CSS Reference로 이동하십시오.