In diesem Artikel besprechen wir, wie man ein HTML-Element über JavaScript erstellt. Hier sehen wir einige Beispiele zum Einfügen des erstellten Elements in das Dokument.
Das Erstellen von Elementen über HTML ist nicht die einzige Möglichkeit, Elemente zu erstellen. Der Einfachheit halber erstellen wir jedoch oft Elemente direkt im HTML-Dokument, aber mit JavaScript ist es auch möglich, Elemente zu erstellen.
Der document.createElement() wird verwendet, um über JavaScript dynamisch einen HTML-Elementknoten mit dem angegebenen Namen zu erstellen. Diese Methode verwendet den Namen des Elements als Parameter und erstellt diesen Elementknoten.
Nach der Erstellung eines Elements können wir entweder die Methode appendChild() oder die Methode insertBefore() verwenden, um das erstellte Element in das Dokument einzufügen.
Wir können das nutzen RemoveChild() Methode zum Entfernen eines Knotens und kann auch die verwenden replaceChild() Methode zum Ersetzen des Knotens.
Syntax
document.createElement(nodename);
Diese Methode akzeptiert einen einzelnen Parameterwert, der wie folgt angegeben wird:
Fakultät in c
Knotenname: Es ist der obligatorische Parameter. Dieser Parameter ist vom Typ String. Es gibt den Namen des Elements an, das wir erstellen müssen. Der im Parameter angegebene Elementname erstellt das Element. Andernfalls wird ein unbekanntes HTML-Element erstellt, wenn der Name des angegebenen Elements nicht erkannt wird.
Der document.createElement() gibt das neu erstellte Element zurück.
Sehen wir uns nun einige Beispiele für die Verwendung an document.createElement() Methode. Hier zeigen wir zwei Beispiele. Im ersten Beispiel verwenden wir die appendChild() Methode zum Einfügen des Elements in das Dokument, und im zweiten Beispiel verwenden wir die insertBefore() Methode zum Einfügen eines von der erstellten Elements document.createElement() Methode.
Beispiel 1
In diesem Beispiel verwenden wir die document.createElement() Methode zum Erstellen eines neuen Schaltflächenelements. Wir werden das erstellte Element mithilfe von einfügen appendChild() Methode. Hier gibt es eine Spaß() Methode, die mithilfe der ein neues Schaltflächenelement erstellt createElement() Methode. Den Text legen wir mit dem fest innerHTML Das wird oben auf der Schaltfläche angezeigt.
Sehen wir uns das unten aufgeführte Beispiel an.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; document.body.appendChild(btn); } <h2> It is an example of using the document.createElement() method. </h2> <h4> Click the below button to insert a new button element in the document. </h4> Create Button Testen Sie es jetzt Ausgabe
Nach der Ausführung des obigen Codes lautet die Ausgabe:
Nachdem Sie auf die angegebene Schaltfläche geklickt haben, lautet die Ausgabe:
Beispiel2
In diesem Beispiel verwenden wir die document.createElement() Methode zum Erstellen eines neuen Schaltflächenelements. Hier verwenden wir die insertBefore() Methode zum Einfügen des erstellten Elements. Es gibt ein div-Element, das über ein untergeordnetes Absatzelement verfügt. Das neue Schaltflächenelement wird vor dem untergeordneten Absatzelement des div-Elements eingefügt.
Sehen wir uns das unten aufgeführte Beispiel an.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; var element = document.getElementById('d1'); var child = document.getElementById('p1'); element.insertBefore(btn, child); } <h2> It is an example of using the document.createElement() method. </h2> <h4 id="heading4"> Click the below button to insert a new button element in the document. </h4> <p id="p1"> This is a paragraph. </p> Create Button Testen Sie es jetzt Ausgabe
Nach der Ausführung des obigen Codes lautet die Ausgabe:
Nachdem Sie auf die Schaltfläche oben geklickt haben, wird die Ausgabe wie folgt aussehen:
Der obige Screenshot zeigt, dass das neue Schaltflächenelement vor dem Absatzelement eingefügt wird. Das liegt daran, dass wir das verwendet haben insertBeofre() Methode zum Einfügen des neuen Elements, das mit der erstellt wurde document.createElement() Methode.