Jak wiecie, JavaScript to dynamiczny język skryptowy. Aby zapewnić dynamiczną funkcjonalność stron internetowych, kod HTML można zapisać za pomocą elementów HTML w JavaScript, a atrybuty CSS można wykorzystać w połączeniu z elementami HTML w JavaScript, aby dostosować stronę internetową. JavaScript „createElement ()„Metoda pozwala tworzyć elementy HTML i„InnerHtml„Właściwość umożliwia pisanie treści dla stron internetowych.

Ten samouczek opisuje metody dynamicznego pisania kodu HTML za pomocą JavaScript.

Jak dynamicznie napisać kod HTML za pomocą JavaScript?

Aby napisać kod HTML za pomocą JavaScript, użyj następujących metod:

• Za pomocą dokumentu.Metoda CreateElement ()
• Własność InnerHtml

Metoda 1: Dynamicznie napisać kod HTML za pomocą dokumentu.Metoda CreateElement ()

JavaScript „dokument.createElement ()„Metoda z„TextContent„Właściwość służy do dynamicznego pisania kodu HTML w JavaScript. Za pomocą metody CreateElement () możesz utworzyć określony element HTML, a właściwość TextContent służy do ustawienia zawartości tekstu.

Składnia

Użyj podanej składni, aby utworzyć element HTML w JavaScript:

dokument.createElement („tagname”)

Przykład

Najpierw utworzymy akapit w pliku JavaScript za pomocą HTML

Tag przekazał „createElement ()" metoda:

const Text = Dokument.createElement („p”);

Użyj właściwości TextContent, aby ustawić tekst w akapicie:

tekst.TextContent = "Welcome to Linuxhint";

Na koniec wydrukuj tekst na stronie internetowej za pomocą „dokument.pisać()" metoda:

dokument.Napisz (tekst.TextContent);

Tutaj możesz zobaczyć w danych wyjściowych, z powodzeniem napiszemy tekst na stronie internetowej za pomocą JavaScript:

Metoda 2: Napisz kod HTML dynamicznie za pomocą właściwości InnerHTML

Aby dynamicznie napisać kod HTML, użyj JavaScript „InnerHtml" nieruchomość. Jest to najprostsze podejście do zmiany zawartości elementu HTML. Obsługuje wszystkie przeglądarki.

Składnia

Postępuj zgodnie z podaną składnią, aby użyć właściwości InnerHTML:

innerhtml = "tekst"

Przykład

W pliku HTML najpierw utwórz przycisk, który wywoła zdefiniowaną funkcję „nagłówek()”W JavaScript na wydarzeniu kliknięcia:

Kliknij tutaj

Utwórz akapit za pomocą

Tag, gdzie tekst zostanie wyświetlony z JavaScript i przypisz do niego identyfikator:

Zdefiniuj funkcję „nagłówek()”W pliku JavaScript. Uzyskaj odniesienie elementu HTML za pomocą jego przypisanego identyfikatora za pomocą „getElementById ()”Metoda i zastosuj„InnerHtml„Własność na nim:

Funkcja Heading ()
dokument.getElementById („nagłówek”).innerHtml = "

Witamy w Linuxhint

";

Wyjście

Opracowaliśmy wszystkie podstawowe informacje związane z dynamicznym pisaniem kodu HTML za pomocą JavaScript.

Wniosek

Aby dynamicznie napisać kod HTML w JavaScript, użyj „dokument.createElement ()„Metoda z„TextContent„Własność lub„InnerHtml" nieruchomość. W pierwszej metodzie nie potrzebujesz żadnego kodu HTML, podczas gdy we właściwości InnerHTML musisz uzyskać dostęp do elementu HTML i wykonać operację. W tym samouczku opisaliśmy metody pisania kodu HTML za pomocą dynamicznego JavaScript.