HTML DOM pozwala na zmianę zawartości HTML, wykorzystując „InnerHtml" nieruchomość. „„InnerHtml”Jest zwykle używane na stronach internetowych do generowania dynamicznych treści HTML, takich jak formularze komentarzy, formularze rejestracyjne i linki.

W tym zapisie omówi procedurę zmiany elementów HTML za pomocą JavaScript. Ponadto w tym artykule zostaną również wykazane przykłady związane z wykorzystaniem właściwości wewnętrznej. A więc zacznijmy!

Składnia właściwości JavaScript InnerHtml

element.innerHtml = wartość

Tutaj, "element”To element HTML, który wybrałeś, aby zmienić jego treść i„ ”wartość”To treść, którą ustawimy.

Przykład 1: Zmiana elementów HTML za pomocą JavaScript

Ten przykład pokaże, jak korzystać z „InnerHtml”Właściwość JavaScript w celu zmodyfikowania treści elementu HTML. Po pierwsze, dodamy element nagłówka do

nagłówek i akapit z

Tag HTML:

Zmień elementy HTML za pomocą JavaScript

Ciąg testowy

Teraz chcemy zmienić treść „

„Element mający identyfikator”P1". Aby to zrobić, wykorzystamy „dokument.getElementById ()”Metoda uzyskania określonego elementu. Następnie ustawimy treść naszej

Element do „To jest Linuxhint.com”:

Zmieniliśmy treść powyższego akapitu

Wykonaj powyższy program w swoim ulubionym edytorze kodu lub dowolnej piaskownicy kodowania online; Jednak w tym celu wykorzystamy JSBin:

Sprawdź poniżej podane dane wyjściowe, które otrzymaliśmy od wykonania powyższego programu:

Przykład 2: Zmiana elementów HTML za pomocą JavaScript

W poprzednim przykładzie zmieniliśmy zawartość elementu akapitowego. Teraz napiszemy program JavaScript do modyfikacji zawartości elementu HTML nagłówka.

Jak widać, dodaliśmy nagłówek z

Tag with ID "ID1„Posiadanie treści”Stary nagłówek JavaScript”:

Stary nagłówek JavaScript

W następnym kroku utworzymy zmienną elementu, która wywoła „dokument.getElementById ()„Metoda uzyskania elementu nagłówka za pomocą id”ID1”:

Ten program zmienił „Old JavaScript Heading” na „Nowy nagłówek JavaScript”

Poniższe dane wyjściowe oznacza, że ​​zawartość nagłówka elementu HTML jest teraz zmieniana:

Przykład 3: Zmiana elementów HTML za pomocą JavaScript

Możesz także zmienić zawartość wielu elementów HTML jednocześnie. Aby zademonstrować, jak to zrobić, dodamy trzy elementy HTML, nagłówek z

Tag, akapit z tagiem i element HTML Division Division z tagiem:

Zmień elementy HTML za pomocą JavaScript

To jest pierwszy element P.

To pierwszy element DIV.

Teraz zmienimy zawartość elementu akapitu za pomocą identyfikatora „P1”I element podziału treści z„div" ID:

Spójrz na wyjście naszego programu JavaScript:

Przykład 4: Zmiana elementów HTML za pomocą JavaScript

Możesz także usunąć zawartość elementu HTML, używając JavaScript „InnerHtml" nieruchomość. W poniższym kodzie JavaScript dodaliśmy element akapitowy do „próbny" ID:

Kliknij podany poniżej przycisk, aby usunąć zawartość HTML

W następnym kroku dodamy przycisk i dołączymy „na kliknięcie„Dyskusator wydarzenia. Kiedy klikniemy „Usuwać”Przycisk wywoła„myFunction ()„Metoda usuwania zawartości

Element HTML:

Usuwać

Na koniec zdefiniujemy „myFunction ()„Metoda w następujący sposób:

Wykonanie powyższego programu pokaże następujące dane wyjściowe. Kliknij na "Usuwać”Przycisk, aby usunąć zawartość elementu akapitu HTML:

Jak widać, „InnerHtml”Własność

Element HTML jest teraz ustawiony na puste:

Wniosek

InnerHtml Właściwość HTML DOM jest wykorzystywana do zmiany zawartości elementów HTML w JavaScript. Można go również użyć do napisania dynamicznego HTML w dokumencie HTML, takim jak linki, formularze komentarzy i formularze rejestracyjne. W tym zapisie omówiono procedurę zmiany elementów HTML za pomocą JavaScript. Ponadto przykłady związane z wykorzystaniem właściwości HTML InnerHTML są również wykazane w tym artykule.