Ändern Sie den Text eines Etiketts mit jQuery

  2. How-To's
  3. jQuery-Anleitungen
  4. Ändern Sie den Text eines Etiketts mit …
Neha Imran 15 Februar 2024
jQuery jQuery Text
  1. Ändern Sie den Text eines Labels in jQuery
  2. Verwenden Sie die jQuery-Methode val(), um den Etikettentext zu ändern
  3. Verwenden Sie die jQuery-Methode text(), um den Etikettentext zu ändern
  4. Verwenden Sie die jQuery-Methode html(), um den Beschriftungstext zu ändern
  5. Verwenden Sie die jQuery-Methode append(), um den Etikettentext zu ändern
Ändern Sie den Text eines Etiketts mit jQuery

Dieser Artikel behandelt zahlreiche Strategien und Taktiken für die Verwendung von jQuery, um den Textinhalt der ausgewählten HTML-Elemente zu ändern. Jeder Ansatz wird ausführlich besprochen, zusammen mit einigen tatsächlich funktionierenden Beispielen für jede Methode.

Ändern Sie den Text eines Labels in jQuery

Eine leichtgewichtige JavaScript-Bibliothek namens jQuery ermöglicht es Ihnen, weniger zu schreiben und mehr zu erreichen. Der Zweck von jQuery ist es, die Verwaltung von JavaScript auf Ihrer Website erheblich zu vereinfachen.

Viele grundlegende Aktionen, die oft durch das Schreiben zahlreicher Zeilen JavaScript-Code ausgeführt werden, sind in jQuery-Methoden eingeschlossen, sodass Sie eine Codezeile schreiben müssen, um sie zu verwenden. Das Erlernen von jQuery und dessen Verwendung kann Ihren Arbeitsablauf verbessern.

Wir werden die Verwendung von jQuery untersuchen, um den Text von HTML-Komponenten zu ändern.

jQuery, ein großartiges Tool, bietet uns mehrere bequeme Möglichkeiten, mit HTML-Komponenten zu interagieren. Heute sprechen wir über die Methoden .val(), .text(), .html() und .append() und wie sie uns helfen können, die von uns benötigte Funktionalität zu erreichen.

Verwenden Sie die jQuery-Methode val(), um den Etikettentext zu ändern

val() ist eine Methode, die verwendet wird, um Operationen mit den Werten von Elementen in einer HTML-basierten Webseite durchzuführen. Diese Methode kann den Wert eines bestimmten Elements festlegen oder abrufen.

Die Methode val() von jQuery kann nur auf HTML-Elemente mit einem value-Attribut angewendet werden.

Syntax:

$(* selector*).val()

Dies gibt den Wert des ausgewählten Elements zurück.

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

Dadurch wird der Wert des ausgewählten Elements auf den von uns angegebenen Wert gesetzt.

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

Dadurch wird der Wert des ausgewählten Elements mithilfe einer Funktion festgelegt. Der Parameter index gibt den Index des Elements zurück, und der Parameter currentvalue gibt den Wert des Elements zurück, falls angegeben.

Was wir jetzt tun müssen, ist das Arbeitsbeispiel der obigen Syntax und Erklärung zu sehen.

Lassen Sie uns zwei Fälle besprechen: einen, in dem wir den Wert des Attributs vollständig überschreiben oder festlegen möchten, und den zweiten, in dem wir den Text an den zuvor angegebenen Wert anhängen möchten.

Legen Sie den Wert des Elements fest

In diesem Fall erfahren Sie, wie Sie den Wert des ausgewählten HTML-Elements mithilfe der Funktion .val() festlegen. Beachten Sie den folgenden Code, um die Idee zu verstehen.

<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>

Ausgang:

jQuery Labeltext mit val() ändern – Fall 1

Wir haben das Element Eingabe: Text ausgewählt, was bedeutet, dass wir das Eingabeelement vom Typ Text auswählen. Der Wert im Eingabe-Tag war null, aber wir haben ihm den Wert mit jQuery zugewiesen.

Gemäß der oben beschriebenen Methode wählt jQuery alle Eingabe-Tags vom Typ Text aus.

Lassen Sie uns einen anderen Fall besprechen, in dem wir mehr als ein Eingabe-Tag in unserem Code haben und wir den Wert des spezifischen festlegen möchten. Überprüfen Sie den folgenden Code.

<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>

Ausgang:

jQuery Labeltext mit val() ändern – Fall 1.1

In der Ausgabe sehen Sie, dass nur das zweite Eingabefeld einen Wert enthält, da wir nur dieses auswählen. Wenn es mehrere Input-Tags des gleichen Typs gibt, können wir jedem eine ID zuweisen, um sie zu identifizieren.

Ein weiterer wesentlicher Punkt ist, dass das zweite Input-Tag bereits einen Wert hatte, der jedoch von der Methode val() überschrieben wurde.

Hängen Sie den Wert an das Element an

In diesem Fall konzentrieren wir uns darauf, den angegebenen Wert an den vorherigen Wert des HTML-Elements anzuhängen. Überprüfen Sie den folgenden Code.

<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>

Ausgang:

jQuery Labeltext mit val() ändern – Fall 2

Lassen Sie uns besprechen, was wir im Code getan haben.

Wir haben die Syntax der Methode val() verwendet, die eine Funktion übernimmt. Der Parameter Wert gibt uns den angegebenen Wert des Elements Hello, und dann wird die Zeichenfolge World daran angehängt.

Verwenden Sie die jQuery-Methode text(), um den Etikettentext zu ändern

Die Funktion text() gibt den Textinhalt der ausgewählten Elemente zurück. Es funktioniert genauso wie innerText in Standard-JavaScript, um den Inhalt des ausgewählten Elements festzulegen oder abzurufen.

Wenn Sie den Wert als Klartext anzeigen möchten, verwenden Sie die Methode text().

Syntax:

$(* selector*).text()

Dies gibt den Text des ausgewählten Elements zurück.

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

Dadurch wird der Text des ausgewählten Elements auf den angegebenen Inhaltswert gesetzt.

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

Dadurch wird der Text des ausgewählten Elements mithilfe einer Funktion festgelegt. Der Parameter index gibt den Index des Elements zurück, und der Parameter currenttext gibt den Textinhalt des Elements zurück, falls vorhanden.

Schauen wir uns an, wie die Methode text() funktioniert, um den Inhalt von HTML-Elementen festzulegen oder zu ändern.

<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>

Ausgang:

jQuery Beschriftungstext mit text() ändern - Ausgabe 1

Die Methode text() setzt den Inhalt des <p>-Tags wie in der Ausgabe gezeigt. Es ist dasselbe, als ob wir <p> Ich bin die Methode text() </p> schreiben.

Die Methode text() mit der Funktionssyntax kann den Text an den Inhalt des ausgewählten Elements anhängen. Der Wert wird als String an die Methode text() übergeben und verwendet diesen String als Textinhalt des Elements.

Wenn wir <h1>Hello World</h1> als Parameter in der text()-Funktion angeben, wird die gesamte Zeichenfolge so wie sie ist zugewiesen und das Ergebnis ist das gleiche wie der übergebene Wert.

Beachten Sie den folgenden Code, um ihn klar zu verstehen.

<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>

Ausgang:

jQuery Beschriftungstext mit text() ändern - Ausgabe 2

Verwenden Sie die jQuery-Methode html(), um den Beschriftungstext zu ändern

Das innere HTML oder der Inhalt des ausgewählten Elements wird von der Methode html() von jQuery gesetzt oder zurückgegeben. Es kann HTML-Elemente in seiner Eingabezeichenfolge enthalten.

Syntax:

$(* selector*).html()

Es gibt den Inhalt des ausgewählten Elements zurück.

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

Es wird den Inhalt des ausgewählten Elements festlegen.

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

Es wird den Inhalt des ausgewählten Elements mithilfe einer Funktion festlegen. Der Parameter currentcontent ruft den aktuellen HTML-Inhalt des ausgewählten Elements ab, während index die Indexposition des Elements innerhalb der Menge zurückgibt.

Sehen wir uns die Arbeitsbeispiele der Funktion html() an.

<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>

Ausgang:

jQuery Labeltext mit html() ändern

Es ist notwendig, einige wichtige Details im Code und den Ergebnissen aus diesem Beispiel zu beachten. Erstens enthält das <p>-Tag bereits etwas HTML-Inhalt, aber die html()-Methode ersetzt es vollständig.

Zweitens zeigte diese Funktion den Inhalt im Tag <h1> an, nachdem sie die Zeichenfolge mit den HTML-Tags als Argument erhalten hatte, was darauf hinweist, dass diese Methode die HTML-Tags und den Text gerendert hat.

Verwenden Sie die jQuery-Methode append(), um den Etikettentext zu ändern

Die Methode append() fügt den bereitgestellten Inhalt an das Ende der ausgewählten Komponenten an. Mit dieser Funktion können wir den Inhalt der HTML-Elemente ändern.

Lassen Sie uns die beiden Fälle besprechen, um ihre Funktionsweise zu verstehen.

Text anhängen

In diesem Fall untersuchen wir das Verfahren zum Hinzufügen neuer Inhalte zu den bestehenden Inhalten des HTML-Elements. Sehen Sie sich den Code unten an.

<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>

Ausgang:

jQuery Labeltext mit append() ändern – Fall 1

Beobachten Sie die Ausgabe. Die Methode append() fügt den von uns bereitgestellten String an den aktuellen Inhalt des <p>-Tags an.

Zusätzlich liest die append()-Methode die HTML-Tags zusammen mit dem Text, während wir unseren Text im <b>-Tag definieren, das verwendet wird, um den Text fett darzustellen, und der angehängte Text ist fett formatiert.

Ersetzen Sie den Text

Wir haben gesehen, wie der Text angehängt wird, aber was ist, wenn wir den Inhalt des HTML-Elements ersetzen möchten?

Mal sehen, was wir uns einfallen lassen können. Überprüfen Sie den folgenden Code.

<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>

Ausgang:

jQuery Labeltext mit append() ändern – Fall 2

Der Code ist einfach zu verstehen. Wir haben die Methode .empty() für unser Element aufgerufen, die seinen Inhalt entfernt, und dann die Methode append() aufgerufen.

Verwandter Artikel - jQuery Text