Jak zmienić tekst etykiety za pomocą JavaScript

W procesie wypełniania konkretnego formularza lub ankiety często zdarzają się sytuacje, w których istnieje potrzeba wyświetlenia konkretnej odpowiedzi lub powiadomienia w odpowiedzi na wybraną opcję. Na przykład radzenie sobie z pytaniami wielokrotnego wyboru itp. W takich przypadkach zmiana tekstu etykiety za pomocą JavaScript jest bardzo pomocna w poprawie dostępności formularzy HTML i ogólnego projektu dokumentu.

Jak zmienić tekst etykiety za pomocą JavaScript?

Do zmiany tekstu etykiety w JavaScript można zastosować następujące podejścia:

- “ wewnętrznyHTML ' własność.
- “ tekst wewnętrzny ' własność.
- jQuery „ tekst() ' oraz ' html() ” metody.

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

„ wewnętrznyHTML Właściwość ” zwraca wewnętrzną zawartość HTML elementu. Ta właściwość może być wykorzystana do pobrania 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, do którego zostanie zastosowana określona właściwość w celu zwrócenia zawartości HTML.

Przykład

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

< środek >< ciało >
< etykieta ID = „funt” > DOM etykieta >
 
< przycisk na kliknięcie = 'tekst etykiety()' > Kliknij tutaj przycisk >
ciało > środek >

- Po pierwsze, w ramach „ <środek> ”, dołącz tag „ etykieta ” o określonym „ ID ' oraz ' tekst wartości.
- Następnie utwórz przycisk z dołączonym „ na kliknięcie ” zdarzenie wywołujące funkcję labelText().

Teraz postępuj zgodnie z podanym poniżej kodem JavaScript:

funkcjonować tekst etykiety ( ) {
wynajmować get = document.getElementById ( „funt” )
get.innerHTML= „Skrócona nazwa to Document Object Model” ;
}

- Zadeklaruj funkcję o nazwie „ Tekst etykiety() ”.
- W swojej definicji uzyskaj dostęp do identyfikatora określonego „ etykieta ' używając ' document.getElementById() ' metoda.
- Na koniec zastosuj właściwość innerHTML i przypisz nowy „ tekst ” do dostępnej etykiety. Spowoduje to przekształcenie tekstu etykiety na nową wartość tekstową po kliknięciu przycisku.

Wyjście

W powyższym wyniku można zauważyć, że wartość tekstowa „ etykieta ” zmienia się zarówno w DOM, jak i w kodzie, a także w „ Elementy ' Sekcja.

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

„ tekst wewnętrzny Właściwość zwraca zawartość tekstową elementu. Właściwość tę można zaimplementować w celu przypisania wartości wejściowej użytkownika wprowadzonej w polu wejściowym do tekstu przypisanej etykiety.

Składnia

element.innerText

W powyższej składni:

- “ element ” wskazuje element, do którego zostanie zastosowana określona właściwość w celu zwrócenia jego zawartości tekstowej.

Przykład

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

< środek >< ciało >
Wpisz imię: < Wejście rodzaj = 'tekst' ID = 'Nazwa' wartość = '' autouzupełnienie = 'wyłączony' >
< Wejście rodzaj = 'przycisk' ID = „bt” wartość = „Zmień tekst etykiety” na kliknięcie = 'tekst etykiety()' > p >
< etykieta ID = „funt” > N / A etykieta >
ciało > środek >

- Najpierw przydziel wejściowe pole tekstowe o określonym „ ID ”. „ zero Wartość tutaj wskazuje, że wartość zostanie pobrana od użytkownika i ustawienie autouzupełniania na „ wyłączony ” pozwoli uniknąć sugerowanych wartości.
- Następnie dołącz etykietę z określonym „ ID ' oraz ' tekst ' wartość.

Teraz we fragmencie kodu JavaScript wykonaj następujące czynności:

funkcjonować tekst etykiety ( ) {
wynajmować get = document.getElementById ( „funt” ) ;
wynajmować name = document.getElementById ( 'Nazwa' ) .wartość;
get.innerText = nazwa;
}

- Zdefiniuj funkcję o nazwie „ Tekst etykiety() ”. W jego definicji uzyskaj dostęp do utworzonej etykiety za pomocą „ document.getElementById() ' metoda.
- Podobnie powtórz powyższy krok, aby uzyskać dostęp do określonego wejściowego pola tekstowego i uzyskać z niego wartość wprowadzoną przez użytkownika.
- Na koniec przypisz wartość wprowadzoną przez użytkownika z poprzedniego kroku do pobranej etykiety. Spowoduje to zmianę tekstu etykiety na wartość wprowadzoną przez użytkownika w polu tekstu wejściowego.

Wyjście

Z powyższego wyniku 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 zawartość tekstową wybranych elementów. html() Metoda zwraca wewnętrzną zawartość HTML wybranych elementów.

Składnia

$ ( selektor ) .tekst ( )

W tej składni:

- “ selektor ” wskazuje na zawartość tekstową otwieranego elementu.

$ ( selektor ) .html ( )

W powyższej składni:

- “ selektor ” odnosi się do innerHTML elementu, do którego uzyskano dostęp.

Przykład

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

Przejdź przez podany poniżej fragment kodu:

< scenariusz src = „https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js” > scenariusz >
< środek >< ciało >
< etykieta ID = „funt1” > Oto następująca strona internetowa: etykieta >
 
< etykieta ID = „funt2” > Zawartość: etykieta >
 
< przycisk na kliknięcie = 'tekst etykiety()' > Kliknij dla Stronie internetowej przycisk >
< przycisk na kliknięcie = 'TekstEtykiety2()' > Kliknij dla Zawartość przycisk >
ciało > środek >

- Po pierwsze, uwzględnij „ jQuery ” biblioteka do zastosowania jej metod.
- Następnie w ciągu „ <środek> ”, dodaj dwie różne etykiety z określonym „ ID ” i wartość tekstową dla każdego z nich.
- Przydziel także osobne przyciski do każdej z utworzonych etykiet. Oba przyciski będą miały dołączone „ na kliknięcie ” zdarzenie wywołujące dwie różne określone funkcje.

Teraz przejdź przez następujące wiersze kodu JavaScript:

funkcjonować tekst etykiety ( ) {
$ ( „#lbl1” ) .tekst ( „Linuksa” )
}
funkcjonować labelText2 ( ) {
$ ( „#lbl2” ) .html ( „JavaScript” )
}

- W pierwszym kroku zadeklaruj funkcję o nazwie „ Tekst etykiety() ”.
- W swojej definicji uzyskaj dostęp do etykiety względem pobranego „ ID ” i zastosuj „ tekst() ” metoda do niego. Spowoduje to zmianę wartości tekstowej etykiety na określoną wartość w jej parametrze.
- Podobnie, zdefiniuj funkcję o nazwie „ EtykietaTekst2() ”.
- Tutaj podobnie powtórz omówiony powyżej krok dostępu do etykiety. W takim przypadku zastosuj „ html() ' metoda. Ta metoda również 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 wyniku pierwsza przekształcona wartość tekstowa etykiety w Document Object Model (DOM) odpowiada jQuery „ tekst() ” metoda, a druga jest wynikiem „ html() ' metoda.

Opracowaliśmy podejścia do zmiany tekstu etykiety za pomocą JavaScript.

Wniosek

„ wewnętrznyHTML ”, właściwość „ tekst wewnętrzny ” właściwość lub jQuery „ tekst() ' oraz ' html() ” metody można wykorzystać do zmiany tekstu etykiety za pomocą JavaScript. Właściwość innerHTML może zostać zastosowana w celu uzyskania określonej etykiety i zmiany jej zawartości tekstowej na nowo przypisaną wartość tekstową. Właściwość innerText może zostać zaimplementowana w celu przypisania nowej wartości tekstowej do dostępnej etykiety, zmieniając ją w ten sposób. Podejście jQuery może być wykorzystane do przekształcenia wartości tekstowej etykiety za pomocą dwóch jej metod, co daje ten sam wynik w postaci dwóch różnych przydzielonych wartości tekstowych. Ten artykuł zademonstrował techniki zmiany tekstu etykiety za pomocą JavaScript.

Jak zmienić tekst etykiety za pomocą JavaScript