So erstellen Sie ein HTML -Element über JavaScript mit CreateLement

HTML ist eine Markup -Sprache, die unseren Webseiten Struktur verleiht, während JavaScript eine Webprogrammiersprache ist, die Interaktivität mit dem Benutzer bietet. Meistens definieren und erstellen Entwickler für den Einfachheit halber Elemente innerhalb von HTML. Dies ist jedoch nicht die einzige Möglichkeit, Elemente zu erstellen, und wir können auch Elemente mit der JavaScript -Dokumentobjektmethode erstellen CreateLement () Um unsere Webseite dynamischer zu gestalten. Aufgrund des Dokumentobjekts können wir auf HTML -Elemente zugreifen.

Was ist CreateLement ()?

Der CreateLement () ist eine integrierte Methode des Dokumentobjekts, die die Funktion hat, ein HTML-Element dynamisch zu erstellen und das neu erstellte HTML-Element zurückzugeben.

Der Syntax von CreateLement () wird unten angegeben:

var creatingelement = document.CreateLement (htmltagName);

Der CreateLement () Nimmt einen Parameter Htmltagname Dies ist ein obligatorischer Parameter der Typ -Zeichenfolge und der Tag -Name eines HTML -Elements.

Es sollte angemerkt werden, dass die CreateLement () Die Methode erstellt ein HTML appendChild () oder InsertBefore () Methoden.

Jetzt, wo wir wissen, was die CreateLement () Methode ist, lasst uns ein Beispiel betrachten, um das besser zu verstehen CreateLement () Methode.

Beispiel 1:

In diesem Beispiel werden wir beim Klicken einer bereits vorhandenen Schaltfläche ein Schaltflächenelement aus JavaScript erstellen.

Erstellen wir zuerst eine Schaltfläche in HTML, die eine hat ONCLICK Ereignis beigefügt.

Magic Button

Wenn ein Benutzer auf die Schaltfläche klickt, wird die Ausführung der Ausführung der Ausführung myfunc () Funktion. Am Ende haben wir das benutzt Skript Tag und bereitgestellt die Quelle (Code.JS) der JavaScript -Datei, die die enthält myfunc () Funktion.

Der JavaScript -Code ist unten angegeben:

Funktion myfunc ()
var MyBtn = Dokument.CreateLement ("Schaltfläche");
mybtn.Innerhtml = "New Button";
dokumentieren.Körper.appendChild (MyBTN);

Im obigen Code haben wir zuerst die initialisiert myfunc () Funktion und erstellt anschließend ein Schaltflächenelement mit dem CreateLement () Methode. Dann benutzten wir den Button einen Titel, den wir benutzten mybtn.Innerhtml Eigentum. Am Ende haben wir den Knopf an den Körper unseres HTML angehängt appendChild () Methode.

Die Ausgabe ist unten angegeben:

Wir können das sehen, wenn wir auf die klicken Magic Button, Es schafft eine neue Schaltfläche mit dem Titel "Neue Button".

Beispiel2:

In diesem Beispiel werden wir eine erstellen H2 Tag von HTML durch JavaScript und dann mit dem HTML -Körper mit dem anhängen InsertBefore () Methode.

Lassen Sie uns zuerst den HTML -Code schreiben:

Über dem Kopf einfügen

Magic Button

Der Rest des Codes entspricht Beispiel 1 mit der Ausnahme, dass wir jetzt ein DIV -Element in einem erstellt haben, das wir erstellt haben

Tag mit der ID "Para".

Der JavaScript -Code ist unten angegeben:

Funktion myfunc ()
var MyContainer = Dokument.GetelementById ("MyContainer");
var para = document.GetElementById ("para");
var myheading = document.CreateLement ("H2");
Myheading.Innerhtml = "Neue Überschrift";
MyContainer.Insertfore (Myheading, Abs.);

Innerhalb der Funktion erhalten wir zuerst die Referenz des und

Element von HTML. Dann erstellen wir eine

Element verwendet CreateLement () Methode. Um es vor dem einzulegen

Element verwenden wir die InsertBefore () Methode, bei der wir die neu erstellt haben

Tag und die

Die Ausgabe des obigen Codes ist unten angegeben:

Wann immer wir auf die magische Schaltfläche klicken, ein neues Element H2 wird über JavaScripts erstellt CreateLement () Methode.

Abschluss

Das Dokumentobjekt gibt uns Zugriff auf HTML-Elemente, und eine der integrierten Methoden der Dokumentobjekte ist die CreateLement () Methode. Der CreateLement () Die Methode wird verwendet, um ein HTML -Element dynamisch zu erstellen, indem der HTML -Tag -Name als Parameter genommen und dann das neu erstellte HTML -Element zurückgegeben wird. Um das neu erstellte HTML -Element an HTML anzuhängen, verwenden wir die appendChild () oder InsertBefore () Methoden.

In diesem Beitrag haben wir gesehen, wie man ein HTML -Element mit dem erstellt CreateLement () Methode in JavaScript.