Własność Innertext w JavaScript | Wyjaśnione

Własność innertext JavaScript służy do uzyskania lub ustawienia tekstu wewnątrz elementu HTML i jego potomków. Innertext ma podobne zjawisko robocze do InnerHtml. Obie właściwości manipulują zawartością elementu HTML, ale z różnymi aspektami. Innertext koncentruje się na treści tekstowej, a InnerHTML rozważa zawartość HTML elementu.

Ten artykuł zawiera wgląd w właściwość Innertext w celu osiągnięcia następujących celów.

• Jak działa właściwość innertext w JavaScript
• Jak korzystać z właściwości Innertext w JavaScript
• Różnica między wewnętrznym a wewnętrznym

Jak działa właściwość innertext w JavaScript

Działanie innertext zależy od następujących składni.

Aby uzyskać tekst elementu HTML:

węzeł.Innertext;

Aby ustawić/zaktualizować tekst elementu HTML:

węzeł.innerText = "tekst"

W powyższej składni:

• węzeł odnosi się do elementu HTML i wszystkich jego potomków.
• tekst reprezentuje nowy tekst, który zostałby zaktualizowany lub ustawiony zamiast istniejącego tekstu.

Jak korzystać z właściwości Innertext w JavaScript

Poniższe przykłady pokazują użycie Innertext Własność w Html.

Przykład 1: Zdobądź tekst elementu HTML

Zilustrowaliśmy ten przykład, aby pokazać, w jaki sposób tekst elementu można uzyskać za pomocą wewnętrznego tekstu. nieruchomość.

Html

To jest przykład z Innertext

Kliknij tutaj, aby uzyskać wewnętrzny tekst

W powyższym kodzie akapit (id = ”P1„) Jest tworzony, który zawiera mały tag i mocny etykietka. Ponadto funkcja get () jest wywoływana po kliknięciu przycisk.

JavaScript

funkcja get ()
Alert (dokument.getElementById („P1”).Innertext);

Funkcja wymieniona Dostawać() jest tworzony, który zawiera alarm Instrukcja wyświetlania tekstu elementu (id = ”P1„).

Wyjście

Zauważono, że tekst akapitu (id = ”P1„) I wszyscy jego potomkowie (rozpiętości i silne) są wyświetlane.

Przykład 2: Zaktualizuj tekst elementu HTML

Kod HTML i JS podany poniżej pomaga w aktualizacji tekstu elementu.

Html

To jest przykład właściwości Innertext

Kliknij tutaj, aby zaktualizować Innertext

Kod HTML tworzy akapit z ID = ”P1”I przycisk, który wykonuje aktualizacja() funkcja na nim na kliknięcie nieruchomość.

JavaScript

aktualizacja funkcji ()
dokument.getElementById („P1”).innerText = "Tekst został zaktualizowany!";

Podany powyżej kod JavaScript tworzy funkcję aktualizacji (), która stosuje właściwość innertext do akapitu za pomocą id = ”P1".

Wyjście

Z wyjścia obserwuje się, że tekst akapitu został zaktualizowany do nowego tekstu.

Przykład 3: Ustaw tekst dla elementu HTML

W tym przykładzie tekst jednego elementu zostanie umieszczony w drugim elemencie, a następujący kod pomaga w tym.

Html

Witamy w Linuxhint

Kliknij tutaj, aby ustawić innertext

Kod HTML zawiera akapit z ID = ”stary„Przycisk uruchomienia ustawić() funkcja i nagłówek z id = ”nowy".

JavaScript

funkcja set ()
dokument.getElementById („nowy”).innerText = dokument.getElementById („stary”).Innertext;

Powyższy kod otrzymuje tekst elementu akapitu (id = ”stary„) I przypisuje ten tekst do elementu nagłówka (id =”nowy„).

Wyjście

Powyższe dane wyjściowe pokazuje, że tekst akapitu (id = „stary”) Jest ustawiony na nagłówek (id =„nowy”).

Różnica między wewnętrznym a wewnętrznym

Innertext I InnerHtml może wprowadzić zamieszanie w twojej głowie. Innertext rozważa tylko treść tekstową, podczas gdy InnerHtml Funkcje zawartości HTML elementu, który może również zawierać znaczniki. Ta sekcja zawiera różnicę między innertext a innerHTML za pomocą następującego kodu.

Html

Witamy w Linuxhint

dla Innertext
dla InnerHtml

Powyższy kod tworzy znacznik akapitu i dwa przyciski. Pierwszy przycisk uruchamia tekst() funkcja, podczas gdy druga funkcja wykonuje html () funkcjonować.

JavaScript

funkcjaText ()
Alert (dokument.getElementById („tekst”).Innertext);

functionHtml ()
Alert (dokument.getElementById („tekst”).innerhtml);

Tworzone są dwie funkcje, które praktykują Innertext I InnerHtml Właściwości na akapicie id = ”tekst".

Wyjście

Obserwuje się, że InnerHtml pokazuje elementy wewnętrzne, podczas gdy Innertext tylko odzyskał treść tekstową.

Wniosek

Własność JavaScript Innertext pozwala uzyskać lub aktualizować/ustawić zawartość elementu HTML. Ten artykuł pokazuje różne składnię właściwości wewnętrznej JavaScript z przykładami, które lepiej przekazują koncepcję. Przechodząc do artykułu, nauczyłbyś się otrzymywać tekst, aktualizować tekst lub ustawić tekst na element HTML za pomocą właściwości Innertext JavaScript. Na koniec przedstawiliśmy różnicę między innertext a innerhtml, aby utorować koncepcję w twojej głowie.