jQuery를 사용하여 레이블 텍스트 변경

Neha Imran 2023년10월12일

jQuery jQuery Text

jQuery에서 레이블 텍스트 변경
jQuery val() 메서드를 사용하여 레이블 텍스트 변경
jQuery text() 메서드를 사용하여 레이블 텍스트 변경
jQuery html() 메서드를 사용하여 레이블 텍스트 변경
jQuery append() 메서드를 사용하여 레이블 텍스트 변경

이 기사에서는 jQuery를 활용하여 선택한 HTML 요소의 텍스트 내용을 수정하기 위한 다양한 전략과 전술을 다룹니다. 각 방법의 실제 작동 예와 함께 각 접근 방식에 대해 자세히 설명합니다.

jQuery에서 레이블 텍스트 변경

jQuery라는 경량 JavaScript 라이브러리를 사용하면 더 적게 작성하고 더 많이 성취할 수 있습니다. jQuery의 목적은 웹 사이트에서 JavaScript를 훨씬 쉽게 관리할 수 있도록 하는 것입니다.

수많은 JavaScript 코드를 작성하여 수행되는 많은 기본 작업은 jQuery의 메서드로 래핑되므로 이를 사용하려면 한 줄의 코드를 작성해야 합니다. jQuery에 대해 배우고 활용하면 작업 흐름을 개선할 수 있습니다.

jQuery를 사용하여 HTML 구성 요소의 텍스트를 변경하는 방법을 살펴보겠습니다.

훌륭한 도구인 jQuery는 HTML 구성 요소와 상호 작용할 수 있는 몇 가지 편리한 방법을 제공합니다. 오늘은 .val(), .text(), .html() 및 .append() 메서드와 필요한 기능을 달성하는 데 도움이 되는 방법에 대해 이야기하겠습니다.

jQuery `val()` 메서드를 사용하여 레이블 텍스트 변경

val()은 HTML 기반 웹 페이지의 요소 값에 대한 작업을 수행하는 데 사용되는 메서드입니다. 이 메서드는 특정 요소의 값을 설정하거나 검색할 수 있습니다.

jQuery의 val() 메소드는 value 속성이 있는 HTML 요소에서만 사용할 수 있습니다.

통사론:

$(* selector*).val()

그러면 선택한 요소의 값이 반환됩니다.

$(* selector*).val(* value*)

이렇게 하면 선택한 요소의 값이 지정한 값으로 설정됩니다.

$(*selector*).val(function*(index, currentvalue)*)

함수를 사용하여 선택한 요소의 값을 설정합니다. index 매개변수는 요소의 인덱스를 반환하고 currentvalue 매개변수는 지정된 경우 요소의 값을 반환합니다.

이제 우리가 해야 할 일은 위 구문과 설명의 작업 예제를 보는 것입니다.

속성의 값을 완전히 재정의하거나 설정하려는 경우와 이전에 지정한 값에 텍스트를 추가하려는 경우의 두 가지 경우에 대해 논의해 보겠습니다.

요소 값 설정

이때 .val() 함수를 사용하여 선택한 HTML 요소의 값을 설정하는 방법에 대해 알아봅니다. 아이디어를 파악하려면 아래 코드를 관찰하십시오.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("input:text").val("val() method of jQuery.");
            });
        </script>
    </head>
    <body>
        <input type="text" value="">
    </body>
</html>

출력:

jQuery Change Label Text Using val() - Case 1

input: text 요소를 선택했습니다. 이는 텍스트 유형의 입력 요소를 선택하는 것을 의미합니다. 입력 태그에서 값이 null이지만 jQuery를 사용하여 값을 할당했습니다.

위에서 설명한 방법에 따르면 jQuery는 텍스트 유형의 모든 입력 태그를 선택합니다.

코드에 둘 이상의 입력 태그가 있고 특정 태그의 값을 설정하려는 또 다른 경우에 대해 논의해 보겠습니다. 아래 코드를 확인하십시오.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#Box2").val("val() method of jQuery.");
            });
        </script>
    </head>
    <body>
        <input id="Box1" type="text" value="">
        <input id="Box2" type="text" value="Hello">
        <input id="Box3" type="text" value="">
    </body>
</html>

출력:

jQuery Change Label Text Using val() - Case 1.1

이 항목만 선택하므로 두 번째 입력 상자에만 값이 포함되어 있음을 출력에서 볼 수 있습니다. 동일한 유형의 입력 태그가 여러 개 있는 경우 각 태그에 ID를 부여하여 식별할 수 있습니다.

또 다른 중요한 점은 두 번째 입력 태그에 이미 값이 있지만 val() 메서드에 의해 재정의되었다는 것입니다.

요소에 값 추가

이 경우 지정된 값을 HTML 요소의 이전 값에 추가하는 데 중점을 둡니다. 아래 코드를 확인하십시오.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("input:text").val(function(i, value){
                    return value + " World";
                });
            });
        </script>
    </head>
    <body>
        <input type="text" value="Hello">
    </body>
</html>

출력:

jQuery Change Label Text Using val() - Case 2

코드에서 수행한 작업에 대해 논의해 보겠습니다.

함수를 받는 val() 메서드의 구문을 사용했습니다. value 매개변수는 Hello, 요소의 지정된 값을 제공한 다음 World 문자열이 추가됩니다.

jQuery `text()` 메서드를 사용하여 레이블 텍스트 변경

text() 함수는 선택한 요소의 텍스트 콘텐츠를 반환합니다. innerText가 표준 JavaScript에서 수행하는 것과 동일한 방식으로 작동하여 선택한 요소의 내용을 설정하거나 검색합니다.

값을 일반 텍스트로 표시하려면 text() 메소드를 사용하십시오.

통사론:

$(* selector*).text()

그러면 선택한 요소의 텍스트가 반환됩니다.

$(* selector*).text(* content*)

이렇게 하면 선택한 요소의 텍스트가 지정된 콘텐츠 값으로 설정됩니다.

$(*selector*).text(function*(index, currenttext)*)

함수를 사용하여 선택한 요소의 텍스트를 설정합니다. index 매개변수는 요소의 색인을 반환하고 currenttext 매개변수는 요소의 텍스트 내용(있는 경우)을 반환합니다.

text() 메서드가 HTML 요소의 내용을 설정하거나 변경하는 방법을 살펴보겠습니다.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("p").text("I am text() method.");
            });
        </script>
    </head>
    <body>
        <p></p>
    </body>
</html>

출력:

jQuery Change Label Text Using text() - Output 1

text() 메서드는 출력에 표시된 대로 <p> 태그의 콘텐츠를 설정합니다. <p> I am text() method </p>라고 쓰는 것과 같습니다.

함수 구문을 사용하는 text() 메서드는 선택한 요소의 내용에 텍스트를 추가할 수 있습니다. 값은 text() 메서드에 문자열로 전달되고 해당 문자열을 요소의 텍스트 콘텐츠로 사용합니다.

text() 함수에 <h1>Hello World</h1>를 매개 변수로 제공하면 전체 문자열을 그대로 할당하고 결과는 전달된 값과 동일합니다.

명확하게 이해하려면 아래 코드를 관찰하십시오.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("p").text("<h1>I am text() method.</h1>");
            });
        </script>
    </head>
    <body>
        <p></p>
    </body>
</html>

출력:

jQuery 텍스트()를 사용하여 레이블 텍스트 변경 - 출력 2

jQuery `html()` 메서드를 사용하여 레이블 텍스트 변경

innerHTML 또는 선택한 요소의 내용은 jQuery의 html() 메서드에 의해 설정되거나 반환됩니다. 입력 문자열에 html 요소를 포함할 수 있습니다.

통사론:

$(* selector*).html()

선택한 요소의 내용을 반환합니다.

$(* selector*).html(* content*)

선택한 요소의 내용을 설정합니다.

$(*selector*).html(function*(index,currentcontent)*)

함수를 사용하여 선택한 요소의 내용을 설정합니다. currentcontent 매개변수는 선택한 요소의 현재 HTML 콘텐츠를 검색하는 반면 index는 집합 내 요소의 인덱스 위치를 반환합니다.

html() 함수의 작업 예제를 살펴보겠습니다.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("p").html("<h1>I am html() method.</h1>");
            });
        </script>
    </head>
    <body>
        <p>I am paragraph</p>
    </body>
</html>

출력:

jQuery Change Label Text Using html()

코드의 몇 가지 주요 세부 정보와 이 예제의 결과를 기록해 둘 필요가 있습니다. 첫째, <p> 태그에는 이미 일부 HTML 콘텐츠가 포함되어 있지만 html() 메서드가 이를 완전히 대체합니다.

둘째, 이 함수는 HTML 태그가 포함된 문자열을 인수로 받은 후 <h1> 태그의 콘텐츠를 표시하여 이 메서드가 HTML 태그와 텍스트를 렌더링했음을 나타냅니다.

jQuery `append()` 메서드를 사용하여 레이블 텍스트 변경

append() 메서드는 선택된 구성 요소의 끝에 제공된 콘텐츠를 추가합니다. 이 기능을 사용하여 HTML 요소의 내용을 변경할 수 있습니다.

작동을 이해하기 위해 두 가지 경우에 대해 논의해 봅시다.

텍스트 추가

이 경우 HTML 요소의 기존 콘텐츠에 새 콘텐츠를 추가하는 절차를 살펴보겠습니다. 아래 코드를 보세요.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("p").append(" <b>I am Appended</b>.");
            });
        </script>
    </head>
    <body>
        <p>I am a paragraph.</p>
    </body>
</html>

출력:

jQuery Change Label Text Using append() - Case 1

출력을 관찰하십시오. append() 메서드는 제공한 문자열을 <p> 태그의 현재 콘텐츠에 추가합니다.

또한 append() 메서드는 텍스트를 굵게 표시하는 데 사용되는 <b> 태그에서 텍스트를 정의할 때 텍스트와 함께 HTML 태그를 읽고 추가된 텍스트는 굵게 표시됩니다.

텍스트 바꾸기

텍스트를 추가하는 것을 보았지만 HTML 요소의 내용을 바꾸려면 어떻게 해야 할까요?

우리가 무엇을 생각해낼 수 있는지 봅시다. 아래 코드를 확인하십시오.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("p").empty();
                $("p").append("I am new paragraph.");
            });
        </script>
    </head>
    <body>
        <p>I am a paragraph.</p>
    </body>
</html>

출력:

jQuery Change Label Text Using append() - Case 2

코드는 이해하기 쉽습니다. 요소에서 .empty() 메서드를 호출하여 내용을 제거한 다음 append() 메서드를 호출했습니다.

jQuery에서 레이블 텍스트 변경

jQuery val() 메서드를 사용하여 레이블 텍스트 변경

요소 값 설정

요소에 값 추가

jQuery text() 메서드를 사용하여 레이블 텍스트 변경

jQuery html() 메서드를 사용하여 레이블 텍스트 변경

jQuery append() 메서드를 사용하여 레이블 텍스트 변경

텍스트 추가

텍스트 바꾸기

관련 문장 - jQuery Text

jQuery `val()` 메서드를 사용하여 레이블 텍스트 변경

jQuery `text()` 메서드를 사용하여 레이블 텍스트 변경

jQuery `html()` 메서드를 사용하여 레이블 텍스트 변경

jQuery `append()` 메서드를 사용하여 레이블 텍스트 변경