Własność innerHTML w JavaScript

Właściwość InnerHTML umożliwia manipulację zawartością HTML na różne sposoby. InnerHTML pozwala użytkownikowi ustawić/aktualizować zawartość HTML lub uzyskać zawartość elementu HTML. Właściwość InnerHTML wykorzystuje metodę getElementByID do identyfikacji elementu i wykonania odpowiedniej operacji.

Dla lepszego zrozumienia podzieliliśmy artykuł na różne fragmenty, aby szczegółowo zademonstrować użycie właściwości wewnętrznej:

• Jak działa właściwość innerhtml w JavaScript
• Jak uzyskać zawartość elementu za pomocą właściwości InnerHTML
• Jak ustawić zawartość elementu za pomocą właściwości InnerHTML
• Jak zaktualizować zawartość elementu za pomocą właściwości InnerHTML

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

Właściwości innerHTML ustawiają/aktualizuje lub zwraca zawartość HTML elementu. Obie funkcje właściwości wewnętrznej mają różne składni, które podano poniżej.

Aby uzyskać treść HTML:

Htmlobject.InnerHtml;

Aby ustawić/aktualizować zawartość HTML:

Htmlobject.innerHtml = "new-Val";

W powyższych składniach, Htmlobject Instancja identyfikuje element HTML, na którym zostanie zastosowany InnerHTML. A element jest identyfikowany za pomocą GetElementById metoda. Natomiast NOWOŚCI to każda wartość, która zostanie ustawiona na element HTML.

Jak używać właściwości InnerHTML w JavaScript

W tej sekcji zapisuje różne przykłady, które pokazują użycie właściwości InnerHTML w JavaScript.

Jak używać właściwości InnerHTML do aktualizacji zawartości HTML

Poniższe fragmenty kodu pokazują działanie właściwości InnerHTML w celu aktualizacji treści HTML.

Html

Witamy w Linuxhint

Kliknij tutaj, aby zdobyć

Powyższy kod ma H4 element z id = ”H”I przycisk z na kliknięcie atrybut.

JavaScript

funkcja get ()
Alert (dokument.getElementById („h”).innerhtml);

Powyższy kod JavaScript tworzy funkcję get () i zawiera alert, który pokazałby zawartość elementu id = ”H".

Wyjście

Wyjście pokazuje, że zawartość elementu HTML jest wyświetlana jako zawartość alertu.

Jak używać właściwości InnerHTML do aktualizacji zawartości HTML

W tej sekcji nauczysz się aktualizować zawartość elementu HTML za pomocą właściwości InnerHTML.

Html

Linuxhint

Kliknij tutaj, aby zaktualizować

Powyższy kod tworzy akapit o ID = ”P1”I przycisk z na kliknięcie atrybut.

JavaScript

aktualizacja funkcji ()
dokument.getElementById („P1”).innerHtml = "Witaj! stosuje się właściwość innerHTML! ";

Kod JS napisany powyżej tworzy funkcję o nazwie aktualizacja() który zostanie wywołany przy kliknięciu przycisku, aby zastosować właściwość InnerHTML na element (akapit) id = ”P1".

Wyjście

Z wyjścia obserwuje się, że zawartość akapitu jest aktualizowana.

Jak użyć właściwości InnerHTML do ustawienia zawartości HTML

Tutaj pokażemy, w jaki sposób InnerHTML ustawia zawartość elementu HTML. W tym celu kod HTML i JavaScript praktykowany w tej sekcji są opracowane poniżej.

Html

To jest akapit

Kliknij tutaj, aby ustawić treść

Powyższy kod HTML ma dwa akapity, w których wartość pierwszego akapitu (id = ”P1„) Zostanie użyte do ustawienia wartości drugiego akapitu (id =”P2„).

Notatka: div W powyższym kodzie jest tylko dla niechęci.

JavaScript

funkcja set ()
const old = dokument.getElementById („P1”).InnerHtml;
dokument.getElementById („p2”).innerHtml = stary;

Tworzona jest funkcja set (), która ma dwa stwierdzenia. Pierwsze stwierdzenie otrzymuje treść z akapitu (id = ”P1„) I zapisuje go w zmiennej (stary). A druga instrukcja ustawia wartość zmiennej na akapit (id = ”P2„).

Wyjście

Z powyższego wyjścia akapit nie ma nic do pokazania, jak tylko po kliknięciu przycisku zawartość akapitu (id = ”P1„) Jest ustawiony na akapit (id =”P2„)

Wniosek

Właściwość InnerHTML JavaScript pozwala uzyskać lub aktualizować/ustawić zawartość elementu HTML. Za pomocą metody getElementByID właściwość innerHTML identyfikuje element HTML. W tym artykule właściwość InnerHTML JavaScript została pokazana w krótkim stylu. Każda podsekcja tutaj przedstawia funkcjonalność właściwości InnerHTML w celu uzyskania, aktualizacji lub ustawienia zawartości elementu HTML.