Pisanie kodu HTML jest łatwe, ale jeśli chodzi o dynamiczne zmiany na stronach takich jak dołączenie HTML, musisz użyć nietypowych strategii. JavaScript to potężny język do wykonywania takich zadań. Możesz łatwo użyć JavaScript, aby umieścić kod HTML w szablonie. Omówimy to w tym artykule.

Za pośrednictwem JavaScript istnieją dwa sposoby dołączania kodu HTML do znacznika Div.

• Korzystanie z właściwości InnerHTML
• Wstawienie sąsiedniego HTML za pomocą funkcji InsertAdJacenthtml ()

Za pomocą atrybutu innerHTML

Aby użyć właściwości InnerHTML do dołączania kodu do elementu (div), najpierw wybierz element (div), w którym chcesz dołączyć kod. Następnie, używając operatora += na InnerHTML, dodaj kod zapakowany jako ciągi.

Oto składnia atrybutu.

Htmlelement.innerHtml += "Włóż tutaj swój kod"

Weźmy tego przykład. Najpierw będziemy odnosić się do elementu HTML za pomocą właściwości:

dokument.getElementById ();

Dlatego stwórzmy <div> i umieść <H1> tag i <przycisk> w środku tego.

To jest samouczek Linuxhint

Dodatek akapit

Jak widać, podaliśmy identyfikator „testu” div Oznacz i umieść tekst z napisem „dołącz akapit” wewnątrz przycisku. Dzięki tym mamy następujący wynik na ekranie

Kod JavaScript:

Mamy przycisk połączony z funkcją o nazwie „ButtonPressed ()” w skrypcie. Ale nie zdefiniowaliśmy tej funkcji, a ten przycisk nic nie robi. Utwórzmy tę funkcję w skrypcie, która dodałaby akapit w tym Div i policz, ile razy dodaliśmy ten akapit. Spójrz na następujący kod.

i = 1;
const ButtonPresed = () =>
dokument.getElementById („test”).innerHtml +=
"

Yoo dołącz ten akapit „ + i +„ czas ”;
i ++;

UWAGA: Utworzyliśmy zmienną kontratakową „I”. Zostanie to użyte do kontrolowania, ile razy dołączyliśmy ten akapit wewnątrz znacznika div.

Teraz, jeśli uruchomimy kod i naciśniemy przycisk, który otrzymujemy:

Notatka: Ta technika zasadniczo usuwa całą treść DIV i zastępuje ją nowymi rzeczami. W rezultacie wszelkie słuchacze powiązane z węzłami dziecięcymi tego Div zostaną utracone. Dlatego zawsze to łączymy.

Przy użyciu metody sąsiadowej

Do podłączenia kodu HTML do Div można również użyć funkcji insertadjacenthtml (). Ta metoda jest przydatna, jeśli chodzi o dołączenie HTML w określonym miejscu. W tej metodzie wymaga dwóch parametrów:

• Lokalizacja (w dokumencie), w którym kod powinien być wstawiany („Afterbegin”, „Findebegin”, „Afterend”, „przedend”).
  • Afterbegin - zaraz po wspomnianym elemencie HTML, ale wewnątrz znacznika.
  • Forbegin - przed wspomnianym elementem HTML
  • Afterend - po zamykaniu znacznika elementu HTML
  • Wcześniej - wewnątrz elementu HTML, ale przed zamykaniem
• Musisz otaczać kod HTML, który chcesz dodać, wewnątrz cytatów.

To jest ogólna składnia metody

Htmlelement.insertadjacenthtml ('LOKALIZACJA', 'KOD HTML');

Użyjmy poprzedniego przykładu. Ten sam kod HTML. Jednak tym razem skrypt byłby nieco inny jako:

Kod HTML:

To jest samouczek Linuxhint

Dodatek akapit

Uwaga: Ponieważ używamy poprzedniego przykładu, kod HTML jest dokładnie taki sam.

Kod JavaScript:

i = 1;
funkcja ButtonPressed ()
dokument.getElementById („test”).insertadJoCenthtml („Forbegin”,
"

Dołączone czasy „ + i +” przed Div

");
i ++;

Uwaga: używamy „Forbegin„Nieruchomość, aby dołączyć

tag przed rozpoczęciem div.

Wyjście:

To wszystko, nauczyłeś się, jak możemy dołączyć jakiś kod HTML za pośrednictwem JavaScript.

Wniosek

Istnieją dwie metody, których można użyć do dołączenia kodu HTML na stronę internetową. Pierwszą metodą jest użycie InnerHtml podczas gdy druga metoda jest przy użyciu Sąsiadujący metoda. W tym artykule przyjęliśmy przykłady metod innerHTML, jak i sąsiadowych do dołączenia kodu HTML na stronę internetową.