Jak dołączyć kod HTML do div za pomocą JavaScript?
W tym artykule powiemy ci
- Jak dołączyć kod HTML do div za pomocą JavaScript?
- Jak dołączyć kod HTML za pomocą innerHTML?
- Jak dołączyć kod HTML za pomocą INSERTADJACTENTHTML?
Jak dołączyć kod HTML do div za pomocą JavaScript?
W JavaScript istnieją dwa sposoby dołączenia kodu HTML do Div. Te sposoby są następujące
- Dołącz za pomocą InnerHTML
- Dołącz za pomocą insertAdJoCentHtml
Spróbujmy zrozumieć powyższe dwie metody dołączania HTML do DIV w JavaScript z odpowiednimi przykładami i wyjaśnieniami.
Jak dołączyć kod HTML za pomocą innerHTML?
Właściwość InnerHTML służy do zmiany zawartości wewnątrz Div lub dowolnego znacznika HTML. Całkowicie zastępuje istniejącą treść DIV nową treść, ale aby użyć tej właściwości, Div należy przypisać unikalnym ID i id zawsze powinien być wyjątkowy.
Kod:
Proces dołączania kodu HTML za pomocą JavaScript
W tym kodzie tworzymy prosty dokument HTML o znaczniku nagłówka i pustym znaczniku Div z unikalnym identyfikatorem sprawdzać. Następnie używamy właściwości JavaScript InnerHTML do dołączenia kodu HTML wewnątrz pustego div.
Wyjście:
Dane wyjściowe wyraźnie pokazuje, że dołączamy HTML Tag za pomocą treści i stylizacji wewnątrz pustego znacznika div za pomocą innerHTML przez JavaScript.
Jak dołączyć za pomocą INSERTADJACTENTHTML?
W JavaScript insertadjacenthtml to kolejna metoda używana do dołączania kodu HTML do Div przez JavaScript. Ta metoda przyjmuje 2 argumenty, pierwszy argument określa pozycję treści w Div, a drugim argumentem jest rzeczywisty kod HTML, który chcesz dołączyć do Div.
Ta metoda wykorzystuje cztery pozycje do dołączenia treści HTML w Div:
- Przedbegin
- uprzednio
- Afterbegin
- Afterend
Przejdźmy przez wszystkie te pozycje jeden po drugim.
Przedbegin
W poniższym kodzie ten atrybut umieści kod HTML przed sprawdzać id Div.
Kod:
Proces dołączania kodu HTML za pomocą JavaScript
Niniejszy akapit został napisany w celu zademonstrowania procesu dołączania kodu HTML w div za pomocą JavaScript.
W tym kodzie tworzymy prosty dokument HTML z tag i mając unikalny identyfikator sprawdzać. Wewnątrz tego div akapit jest pisany za pomocą . Teraz dołączamy HTML Wyjście: Wyjście wyraźnie to pokazuje InsertAdJacenthtml Metoda dołącza kod HTML przed ukierunkowanym Divem, ponieważ używamy jego atrybutu Forbegin do pozycjonowania naszego dołączonego kodu HTML. wcześniej Kod: Niniejszy akapit został napisany w celu zademonstrowania procesu dołączania kodu HTML w div za pomocą JavaScript. W tym kodzie tworzymy prosty dokument HTML z tag i mając unikalny identyfikator sprawdzać. Wewnątrz tego div akapit jest pisany za pomocą . Teraz dołączamy HTML Wyjście: Wyjście wyraźnie to pokazuje InsertAdJacenthtml Metoda dołącza kod HTML po Afterbegin Kod: Niniejszy akapit został napisany w celu zademonstrowania procesu dołączania kodu HTML w div za pomocą JavaScript. W tym kodzie tworzymy prosty dokument HTML z tag i mając unikalny identyfikator sprawdzać. Wewnątrz tego div akapit jest pisany za pomocą . Teraz dołączamy HTML Wyjście: Wyjście wyraźnie to pokazuje InsertAdJacenthtml Metoda dołącza kod HTML wewnątrz docelowej div, ale tuż przed Afterend Kod: Niniejszy akapit został napisany w celu zademonstrowania procesu dołączania kodu HTML w div za pomocą JavaScript. W tym kodzie tworzymy prosty dokument HTML z tag i Posiadanie unikalnego identyfikatora sprawdzać. Wewnątrz tego div akapit jest pisany za pomocą . Teraz dołączamy HTML Wyjście: Wyjście wyraźnie to pokazuje InsertAdJacenthtml Metoda dołącza kod HTML po ukierunkowanym div, ponieważ używamy jego atrybutu Afterend do pozycjonowania naszego dołączonego kodu HTML. Wniosek W JavaScript możemy dołączyć kod HTML do div za pomocą InnerHtml I InsertAdJacenthtml. InnerHtml dołącza kod HTML, zastępując bieżącą zawartość w DIV nową treść, podczas gdy insertAdJoCentHtml dołącza kod HTML poprzez pozycjonowanie, za pomocą Phorbegin, Affterbegin, Przed i Abrybuty Afterend atrybuty. W tym artykule dowiedzieliśmy się o procesie dołączania kodu HTML do div za pomocą JavaScript.
W poniższym kodzie ten atrybut umieści kod HTML wewnątrz sprawdzać id div, ale po Proces dołączania kodu HTML za pomocą JavaScript
W poniższym kodzie ten atrybut umieści kod HTML wewnątrz sprawdzać id div, ale tuż przed Proces dołączania kodu HTML za pomocą JavaScript
W poniższym kodzie ten atrybut umieści kod HTML po sprawdzać id Div.Proces dołączania kodu HTML za pomocą JavaScript