InnerHTML można wykorzystać do dynamicznego pisania dokumentu HTML. Jest to głównie wdrażane do generowania dynamicznych dokumentów HTML, w tym formularzy komentarzy, formularzy rejestracyjnych, linków i wielu innych. Ponadto możesz również wymienić innerhtml wewnątrz div za pomocą jQuery. Aby to zrobić, „.html ()”Funkcja jest wykorzystywana. Po kliknięciu przycisku po załadowaniu strony internetowej zawartość w Div zostanie zmodyfikowana za pomocą funkcji HTML ().

Ten zapis pokaże zastąpienie innerhtml div z wykorzystaniem jQuery.

Jak wymienić innerhtml div za pomocą jQuery?

Aby wymienić wewnętrzny kontener DIV za pomocą jQuery, postępuj zgodnie z podrzędną procedurą.

Krok 1: Utwórz główny kontener „Div”

Początkowo utwórz główny kontener „Div” za pomocą „„Element i dodaj identyfikator w znaczniku otwierającym„ Div ”o konkretnej nazwie.

Krok 2: Dodaj nagłówki

Następnie użyj dowolnego znacznika nagłówka z „H1" Do "H6„Aby dodać nagłówek do strony HTML. Na przykład wykorzystaliśmy „H1”Dla głównego nagłówka i„H2”Dla drugiego nagłówka. Możesz także zdefiniować styl inline w znaczniku nagłówka.

Krok 3: Zrób kolejny kontener DIV

Następnie zrób inny kontener DIV, postępując zgodnie z tą samą metodą w poprzednim kroku.

Krok 4: Utwórz przycisk

Następnie dodaj przycisk za pomocą „" element. Dodaj także „klasa”Atrybut wewnątrz znacznika otwierającego div i przypisz dwa lub więcej nazw klas do tego atrybutu. „„typ„Atrybut jest używany do określenia typu elementu. Następnie osadziłem tekst pomiędzy „przycisk„Element, aby pokazać na przycisku:

Linuxhint Ltd UK

Pierwsza treść bez żadnych zmian

Wyjście powyższego bloku kodu podano poniżej:

Krok 3: Zastosuj CSS na pojemniku „Div”

Uzyskaj dostęp do drugiego „div”Pojemnik z pomocą nazwy klasy„.Drugi dyw”:

.drugi div
Text-Align: Center;

Po uzyskaniu dostępu do kontenera Div zastosuj „tekst-align„Własność CSS, która jest wykorzystywana do ustawiania wyrównania tekstu.

Wyjście

Krok 4: Wstaw bibliotekę jQuery

Dodamy bibliotekę jQuery, wkładając następujący link do znacznika pomiędzy elementem głowy pliku HTML:

Krok 5: Wymień InnerHtml Div

W "”Tag, Dodaj następujący kod:

W powyższym fragmencie kodu:

• • Zdefiniuj "gotowy()„Funkcja, która będzie uruchomiona dopiero po tym, jak model obiektu dokumentu (DOM) jest gotowy do wykonania kodu JavaScript.
  • Wykonaj funkcję elementu przycisku do wykonywania akcji, gdy użytkownik się na nim uderzy.
  • Teraz "&(selektor).html ()”Funkcja jest wykorzystywana do zastąpienia innerhtml Div. Aby to zrobić, dodaj dane wewnątrz „()" zamienić.

Można zauważyć, że innerhtml div został zmieniony po kliknięciu przycisku:

Nauczyłeś się o wymianie innerhtml div za pomocą jQuery.

Wniosek

Aby zastąpić innerhtml div za pomocą jQuery, najpierw wstaw link biblioteki jQuery do znacznika skryptu za pomocą „src" atrybut. A później "html ()„Funkcja jest używana jako„&(selektor).html". Aby to zrobić, „$ („#First-Div”).html”W tym scenariuszu wykorzystywane jest. Ten zapis wyjaśnił metodę zastąpienia innerhtml kontenera Div wykorzystującego jQuery.