Jak zmienić treść elementu HTML w JavaScript
HTML Acronim of Hyper Tekst Marka Język jest używany do tworzenia struktury stron internetowych, które codziennie widzisz w Internecie. Tymczasem JavaScript to dobrze znany język skryptowy używany do wykonywania dynamicznych operacji na stronach internetowych, aby uczynić je bardziej interaktywnymi.
Ciekawą funkcją HTML jest HTML DOM Short dla modelu Object Document. Jest to interfejs API dla dokumentów HTML i XML. Jest zasadniczo używany do zapewnienia logicznej struktury do dokumentów. Określa, w jaki sposób można ocenić i manipulować dokumentem HTML. Pozwala JavaScript na zmianę zawartości elementów HTML.
W tym artykule omówimy:
- Zmiana zawartości elementów HTML za pomocą JavaScript
- Zmiana wartości atrybutu HTML za pomocą JavaScript
- Wykorzystanie dokumentu.Metoda zapisu ()
Zmiana zawartości elementów HTML za pomocą JavaScript
Właściwość InnerHTML jest najszybszym podejściem do zmiany zawartości elementów HTML. IIS wyjaśnił szczegółowo poniżej:
Własność InnerHtml
Właściwość InnerHTML zmienia zawartość elementu HTML. Aby użyć tej metody, użyj następującej składni.
Składnia używania innerHTML
dokument.getElementById (id).innerHtml = nowy htmlWykonajmy właściwość InnerHTML z przykładem.
Przykład 1
To jest akapit
Powyższy akapit został zmieniony przez właściwość InnerHTML
W powyższym przykładzie manipulujemy
element za pomocą właściwości JavaScript InnerHTML. Akapit ma id ID = „Para1”. HTML DOM używa tego identyfikatora, aby uzyskać konkretny element, a następnie zmienić zawartość
Tag za pomocą właściwości InnerHTML. W ten sposób stary akapit jest zastępowany przez nowy akapit. Wyjście powyższego przykładu jest następujące:
Możemy również zmienić elementy za pomocą tej metody. Zróbmy przykład, w którym zmienia się właściwość innerhtml
element za pomocą jego identyfikatora.
Przykład 2
Zmieńmy ten nagłówek
Stary nagłówek został zmieniony
W powyższym przykładzie HTML DOM używa identyfikatora ID = „Head2”, aby uzyskać
Element i właściwość InnerHTML zmienia treść elementu. Wyjście jest następujące.
Omówmy teraz, w jaki sposób możemy zmienić wartość atrybutu HTML za pomocą JavaScript.
Zmiana wartości atrybutu
Za pomocą nazwy atrybutu możemy zmienić wartość atrybutu HTML.
Składnia
Składnia pokazano poniżej:
dokument.getElementById (id).atrybut = nowa wartośćPokazajmy powyższą składnię za pomocą odpowiedniego przykładu.
Obraz psa jest zmieniany na wizerunek kota
W powyższym przykładzie HTML DOM otrzymuje element IMG według id = ”Image1„ Następnie atrybut src JavaScript z psieckiego.JPG do Catpic.jpg.
Przejście do ostatniej metody, jaką jest dokument.Metoda zapisu ().
dokument.pisać()
dokument.Write () służy do zapisywania wyrażeń HTML lub kodu JavaScript bezpośrednio w strumieniu wyjściowym HTML. Będzie nadpisywał dokument, jeśli użyjesz tej metody po załadowaniu dokumentu HTML. Wypróbujmy przykład.
To jest akapit
To kolejny akapit
W powyższym przykładzie dokument.Metoda zapisu () pokazuje wysokość ekranu okna jako wyjściowe.
Wniosek
HTML DOM zapewnia pewne właściwości, które umożliwiają JavaScript na zmianę zawartości elementów HTML. Aby zmienić zawartość elementów HTML, stosuje się właściwość innerhtml (). Możesz także zmienić wartość atrybutu elementów HTML, bezpośrednio za pomocą nazwy atrybutu. Tymczasem dokument.Write () właściwość służy do zapisywania wyrażeń HTML lub kodu JavaScript bezpośrednio w strumieniu wyjściowym HTML. W tym artykule szczegółowo omówiono te właściwości z odpowiednimi przykładami.