jQuery を使用してラベルのテキストを変更する

Neha Imran 2023年10月12日

jQuery jQuery Text

jQuery でラベルのテキストを変更する
jQuery val() メソッドを使用してラベルテキストを変更する
jQuery text() メソッドを使用してラベルテキストを変更する
jQuery html() メソッドを使用してラベルテキストを変更する
jQuery append() メソッドを使用してラベルテキストを変更する

この記事では、選択した HTML 要素のテキストコンテンツを変更するために jQuery を利用するためのさまざまな戦略と戦術について説明します。各アプローチについて、各方法の実際の機能例とともに詳しく説明します。

jQuery でラベルのテキストを変更する

jQuery と呼ばれる軽量の JavaScript ライブラリを使用すると、記述を減らしてより多くのことを達成できます。 jQuery の目的は、Web サイトでの JavaScript の管理を大幅に容易にすることです。

多くの場合、多数の JavaScript コードを記述することによって実行される多くの基本的なアクションは、jQuery のメソッドにラップされているため、それらを使用するには 1 行のコードを記述する必要があります。 jQuery について学び、活用することで、ワークフローを改善できます。

jQuery を使用して HTML コンポーネントのテキストを変更する方法について説明します。

優れたツールである jQuery は、HTML コンポーネントを操作するための便利な方法をいくつか提供してくれます。今日は、メソッド .val()、.text()、.html()、および .append() と、それらが必要な機能を実現するのに役立つ方法について説明します。

jQuery `val()` メソッドを使用してラベルテキストを変更する

val() は、HTML ベースの Web ページ内の要素の値に対して操作を実行するために使用されるメソッドです。このメソッドは、特定の要素の値を設定または取得できます。

jQuery の val() メソッドは、value 属性を持つ HTML 要素でのみ使用できます。

構文：

$(* selector*).val()

これにより、選択した要素の値が返されます。

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

これにより、選択した要素の値が指定した値に設定されます。

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

これにより、関数を使用して選択した要素の値が設定されます。 index パラメータは要素のインデックスを返し、currentvalue パラメータは指定されている場合は要素の値を返します。

ここで行う必要があるのは、上記の構文と説明の実際の例を確認することです。

2つのケースについて説明します。1つは属性の値を完全にオーバーライドまたは設定する場合で、もう 1つは以前に指定した値にテキストを追加する場合です。

要素の値を設定する

この場合、.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>

出力：

val() を使用した jQuery ラベルテキストの変更 - ケース 1

要素 input: text を選択しました。これは、テキストタイプの入力要素を選択することを意味します。 input タグでは値が 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>

出力：

val() を使用した jQuery ラベルテキストの変更 - ケース 1.1

2 番目の入力ボックスのみが選択されているため、2 番目の入力ボックスのみに値が含まれていることが出力でわかります。同じタイプの入力タグが複数ある場合は、それぞれに ID を付けて識別することができます。

もう 1つの重要な点は、2 番目の入力タグにはすでに何らかの値がありましたが、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>

出力：

val() を使用した jQuery ラベルテキストの変更 - ケース 2

コードで行ったことについて説明しましょう。

関数を取る val() メソッドの構文を使用しました。パラメータ value は要素 Hello, の指定された値を提供し、文字列 World がそれに追加されます。

jQuery `text()` メソッドを使用してラベルテキストを変更する

text() 関数は、選択した要素のテキストコンテンツを返します。選択した要素のコンテンツを設定または取得するために、標準の JavaScript で innerText が行うのと同じように機能します。

値をプレーンテキストとして表示する場合は、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() メソッド </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 Change Label Text Using text() - Output 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>

出力：

html() を使用した jQuery ラベルテキストの変更

この例のコードと結果のいくつかの重要な詳細に注意する必要があります。まず、<p> タグにはすでにいくつかの HTML コンテンツが含まれていますが、html() メソッドがそれを完全に置き換えます。

次に、この関数は、HTML タグを含む文字列を引数として受け取った後、<h1> タグ内のコンテンツを表示しました。これは、このメソッドが HTML タグとテキストをレンダリングしたことを示しています。

jQuery `append()` メソッドを使用してラベルテキストを変更する

append() メソッドは、提供されたコンテンツを選択されたコンポーネントの最後に追加します。この関数を使用して、HTML 要素のコンテンツを変更できます。

その動作を理解するために、2つのケースについて説明しましょう。

テキストを追加

この場合、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>

出力：

append() を使用した jQuery ラベルテキストの変更 - ケース 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>

出力：

append() を使用した jQuery ラベルテキストの変更 - ケース 2

コードは簡単に把握できます。要素に対して .empty() メソッドを呼び出してコンテンツを削除し、次に append() メソッドを呼び出しました。

jQuery でラベルのテキストを変更する

jQuery val() メソッドを使用してラベル テキストを変更する

要素の値を設定する

要素に値を追加する

jQuery text() メソッドを使用してラベル テキストを変更する

jQuery html() メソッドを使用してラベル テキストを変更する

jQuery append() メソッドを使用してラベル テキストを変更する