Dieses Tutorial beschreibt die Methoden zum dynamischen Schreiben von HTML-Code mit JavaScript.
Wie schreibt man HTML-Code dynamisch mit JavaScript?
Verwenden Sie die folgenden Methoden, um HTML-Code mit JavaScript zu schreiben:
Methode 1: HTML-Code dynamisch mit der Methode document.createElement() schreiben
JavaScripts „ document.createElement() “-Methode mit dem „ Textinhalt ”-Eigenschaft wird verwendet, um einen HTML-Code dynamisch in JavaScript zu schreiben. Mit der createElement()-Methode können Sie ein bestimmtes HTML-Element erstellen, und die textContent-Eigenschaft wird verwendet, um den Textinhalt festzulegen.
Syntax
Verwenden Sie die angegebene Syntax, um ein HTML-Element in JavaScript zu erstellen:
dokumentieren. createElement ( 'Verlinke den Namen' )
Beispiel
Hier erstellen wir zunächst einen Absatz in einer JavaScript-Datei, indem wir das HTML-
-Tag verwenden, das in einem „ createElement() ' Methode:
konst Text = dokumentieren. createElement ( 'p' ) ;Verwenden Sie die Eigenschaft textContent, um den Text in einem Absatz festzulegen:
Text. Textinhalt = 'Willkommen bei Linuxhint' ;
Drucken Sie abschließend den Text auf der Webseite mit dem „ document.write() ' Methode:
dokumentieren. schreiben ( Text. Textinhalt ) ;Hier sehen Sie in der Ausgabe, dass wir erfolgreich den Text auf der Webseite mit JavaScript geschrieben haben:
Methode 2: HTML-Code dynamisch mit innerHTML-Eigenschaft schreiben
Verwenden Sie zum dynamischen Schreiben von HTML-Code das JavaScript „ innerHTML ' Eigentum. Es ist der einfachste Ansatz, den Inhalt eines HTML-Elements zu ändern. Es unterstützt alle Browser.
Syntax
Befolgen Sie die angegebene Syntax, um die innerHTML-Eigenschaft zu verwenden:
innerHTML = 'Text'Beispiel
Erstellen Sie in der HTML-Datei zunächst eine Schaltfläche, die die definierte Funktion „ Überschrift() ” in JavaScript auf das Klickereignis:
< Schaltfläche anklicken = 'Überschrift()' > Klick hier Knopf >Erstellen Sie einen Absatz mit dem Tag
, in dem der Text aus dem JavaScript angezeigt wird, und weisen Sie ihm eine ID zu:
< p-ID = 'Überschrift' > p >Definiere eine Funktion “ Überschrift() “ in einer JavaScript-Datei. Holen Sie sich die Referenz des HTML-Elements anhand der zugewiesenen ID mit Hilfe des „ getElementById() “ Methode und wenden Sie eine „ innerHTML ” Eigenschaft darauf:
Funktionsüberschrift ( ) {dokumentieren. getElementById ( 'Überschrift' ) . innerHTML = '
Willkommen bei Linuxhint
' ;}
Ausgabe
Wir haben alle wesentlichen Informationen rund um das dynamische Schreiben des HTML-Codes mit JavaScript zusammengestellt.
Fazit
Um HTML-Code dynamisch in JavaScript zu schreiben, verwenden Sie das „ document.createElement() “-Methode mit dem „ Textinhalt „Eigentum oder das“ innerHTML ' Eigentum. Bei der ersten Methode benötigen Sie keinen HTML-Code, während Sie in der innerHTML-Eigenschaft auf das HTML-Element zugreifen und eine Operation darauf ausführen müssen. In diesem Tutorial haben wir die Methoden zum dynamischen Schreiben von HTML-Code mit JavaScript beschrieben.