Jak zmienić tekst etykiety za pomocą JavaScript

W procesie wypełniania określonego formularza lub kwestionariusza często występują sytuacje, w których istnieje potrzeba wyświetlania określonej odpowiedzi lub powiadomienia w odpowiedzi na wybraną opcję. Na przykład radzenie sobie z pytaniami wielokrotnego wyboru itp. W takich przypadkach zmiana tekstu etykiet za pomocą JavaScript jest bardzo pomocna w poprawie dostępności formularzy HTML i ogólnego projektu dokumentów.

Jak zmienić tekst etykiety za pomocą JavaScript?

Następujące podejścia można wykorzystać do zmiany tekstu etykiet w JavaScript:

• • "InnerHtml" nieruchomość.
  • "Innertext" nieruchomość.
  • JQuery „tekst()" I "html ()”Metody.

Podejście 1: Zmień tekst etykiety w JavaScript za pomocą właściwości InnerHTML

„„InnerHtml”Właściwość zwraca wewnętrzną zawartość HTML elementu. Tę właściwość można wykorzystać do pobierania określonej etykiety i zmiany jej tekstu na nowo przypisaną wartość tekstową.

Składnia

element.InnerHtml

W powyższej składni:

• • "element”Odnosi się do elementu, w którym zastosowano określoną właściwość do zwrócenia jej zawartości HTML.

Przykład

Przejrzyj następujący fragment kodu, aby jasno wyjaśnić określoną koncepcję:

Dom



Kliknij tutaj

• • Po pierwsze, w „„”Tag, dołącz„etykieta”Z określonym„ID" I "tekst”Wartości.
  • Następnie utwórz przycisk z załączonym „na kliknięcie„Wydarzenie wywołujące funkcję eavelText ().

Teraz postępuj zgodnie z podgrywanym kodem JavaScript:

funkcja etykietaText ()
Niech get = dokument.getElementById („lbl”)
Dostawać.innerHtml = "W skrócie nazwa jest modelem obiektu dokumentu";

• • Deklaruj funkcję o nazwie „LabelText ()".
  • W swojej definicji uzyskaj dostęp do identyfikatora określonego „etykieta" używając "dokument.getElementById ()" metoda.
  • Na koniec zastosuj właściwość InnerHTML i przypisz nowy „tekst„Wartość do dostępnej etykiety. Spowoduje to przekształcenie tekstu etykiety na nową wartość tekstową przy przycisku.

Wyjście

W powyższym wyjściu można zauważyć, że wartość tekstu „etykieta”Zmienia się zarówno na DOM, jak i w kodzie również w„Elementy" Sekcja.

Podejście 2: Zmień tekst etykiety w JavaScript za pomocą właściwości Innertext

„„Innertext„Właściwość zwraca treść tekstu elementu. Tę właściwość można zaimplementować, aby przydzielić wartość wprowadzania użytkownika wprowadzoną w polu wejściowym do tekstu przypisanej etykiety.

Składnia

element.Innertext

W powyższej składni:

• • "element”Wskazuje element, w którym zastosowano konkretną właściwość, aby zwrócić swoją treść tekstową.

Przykład

Poniższy przykład pokazuje podaną koncepcję:

Wpisz imię:

Nie dotyczy

• • Najpierw przeznacz pole tekstowe wejściowe o określonym „ID". „„zero„Wartość tutaj wskazuje, że wartość zostanie pobrana od użytkownika i ustawienie AutoComplete na„wyłączony”Uniknie sugerowanych wartości.
  • Następnie uwzględnij etykietę o określonej „ID" I "tekst" wartość.

Teraz w fragmencie kodu JavaScript wykonaj następujące kroki:

funkcja etykietaText ()
Niech get = dokument.getElementById („lbl”);
Niech nazwa = dokument.getElementById („Nazwa”).wartość;
Dostawać.innerText = nazwa;

• • Zdefiniuj funkcję o nazwie „LabelText ()". W swojej definicji uzyskaj dostęp do utworzonej etykiety za pomocą „dokument.getElementById ()" metoda.
  • Podobnie powtórz powyższy krok, aby uzyskać dostęp do określonego pola tekstowego wejściowego i uzyskaj z niego wartość zawartą użytkownika.
  • Na koniec przypisz wartość zawieraną przez użytkownika z poprzedniego kroku do pobieranej etykiety. To zmieni tekst etykiety na wartość zawieraną przez użytkownika w polu tekstowym wejściowym.

Wyjście

W powyższym wyjściu widać, że osiągnięto pożądane wymaganie.

Podejście 3: Zmień tekst etykiety w JavaScript za pomocą metod JQuery Text () i Html ()

„„tekst()”Metoda zwraca treść tekstu wybranych elementów.„„html ()”Metoda zwraca zawartość wewnętrznych wybranych elementów.

Składnia

$ (selektor).tekst()

W tej składni:

• • "selektor”Wskazuje na treść tekstu dostępnego elementu.

$ (selektor).html ()

W powyższej składni:

• • "selektor”Odnosi się do innerhtml dostępnego elementu.

Przykład

Ten przykład ilustruje podaną koncepcję przy użyciu metod jQuery.

Przejdź przez fragment kodu poniżej:

To jest następująca strona internetowa:



Treść:



Kliknij, aby zobaczyć stronę internetową
Kliknij, aby uzyskać treść

• • Po pierwsze, dołącz „JQuery„Biblioteka do zastosowania swoich metod.
  • Następnie w „w””Tag, dołącz dwie różne etykiety z określonym„ID”I wartość tekstu w stosunku do każdego z nich.
  • Przydzielić również oddzielne przyciski do każdej z utworzonych etykiet. Oba przyciski będą miały załączony „na kliknięcie”Wydarzenie wywołujące dwie różne określone funkcje.

Teraz przejrzyj następujące wiersze kodu JavaScript:

funkcja etykietaText ()
$ ('#lbl1').tekst („Linuxhint”)

funkcja etykietaText2 ()
$ ('#lbl2').HTML („JavaScript”)

• • W pierwszym etapie zadeklaruj funkcję o nazwie „LabelText ()".
  • W swojej definicji uzyskaj dostęp do etykiety przeciwko pobieranym „ID”I zastosuj„tekst()„Metoda do tego. Spowoduje to zmianę wartości tekstowej etykiety na określoną wartość w jej parametrze.
  • Podobnie zdefiniuj funkcję o nazwie „labelText2 ()".
  • Podobnie, powtórz wyżej odkryty krok, aby uzyskać dostęp do etykiety. W takim przypadku zastosuj „html ()" metoda. Ta metoda będzie działać w ten sam sposób i zwróci określoną wartość tekstową, zmieniając w ten sposób tekst etykiety.

Wyjście

W powyższym wyjściu pierwsza przekształcona wartość tekstu etykiety w modelu obiektu dokumentu (DOM) odpowiada jQuery „tekst()”Metoda, a druga jest wynikiem„html ()" metoda.

Zebraliśmy podejścia do zmiany tekstu etykiet za pomocą JavaScript.

Wniosek

„„InnerHtml„Nieruchomość,„Innertext„Nieruchomość lub JQuery”tekst()" I "html ()„Metody można wykorzystać do zmiany tekstu etykiet za pomocą JavaScript. Właściwość InnerHTML można zastosować, aby uzyskać określoną etykietę i zmienić jej treść tekstu na nowo przypisaną wartość tekstową. Właściwość Innertext można wdrożyć w celu przydzielenia nowej wartości tekstowej do dostępnej etykiety, tym samym, zmieniając ją. Podejście JQuery można zastosować do przekształcenia wartości tekstowej etykiety za pomocą jej dwóch metod, co spowodowało ten sam wynik w postaci dwóch różnych przydzielonych wartości tekstu. Ten zapis wykazał techniki zmiany tekstu etykiet za pomocą JavaScript.