So fügen Sie HTML -Elemente durch JavaScript hinzu oder löschen Sie sie
In dieser Beschreibung werden die Verfahren zum Hinzufügen oder Löschen der Verfahren erörtert HTML -Elemente durch JavaScript. Wir werden auch die Verwendung von Methoden appendChild () und insertbefore () demonstrieren, um die HTML -Elemente hinzuzufügen. Darüber hinaus werden Ihnen Beispiele zum Löschen der HTML -Elemente zur Löschung der HTML -Elemente zur Verfügung gestellt. So lass uns anfangen!
So fügen Sie HTML -Elemente über JavaScript mithilfe der Methode appendChild () hinzu
Die Methode JavaScript appendChild () wird zum Hinzufügen eines HTML -Elements als Kind des angegebenen übergeordneten Knotens verwendet. Diese Methode wird verwendet, um HTML -Elemente zu verschieben.
Syntax der appendChild () -Methode
Elternknoten.appendChild (Childnode);Hier das Elternknoten ist das HTML -Element, das wir als Elternteil deklarieren wollen, während die Childnode ist das neu erstellte HTML -Element, das dem übergeordneten Knoten hinzugefügt wird.
Beispiel: So fügen Sie HTML -Elemente über JavaScript mithilfe der Methode appendChild () hinzu
In diesem Beispiel zeigen wir Ihnen, wie Sie das verwenden “appendChild ()Methode zum Hinzufügen der HTML -Elemente über JavaScript. Zunächst werden wir eine Überschrift und einen Absatz mit dem hinzufügen
Und
HTML -Elemente:
Dies ist LinuxHint.com
Hinzufügen von HTML -Elementen über JavaScript.
Dies ist der Hauptabsatz.
Dies ist der zweite Absatz.
Im nächsten Schritt werden wir eine neue erstellen
Element "Absatz"Durch die Verwendung des"CreateLement ()Methode des Dokumentobjekts:
Führen Sie das oben gegebene Programm in Ihrem bevorzugten Code-Editor oder einer Online-Codierungssandbox aus. Wir werden das JSBin jedoch für diesen Zweck verwenden:
Wie Sie aus der untergegebenen Ausgabe sehen können, wird ein neues HTML-Element hinzugefügt, in dem der Textinhalt mit dem Textinhalt verwendet wird. “Dies ist ein neuer Knoten”:
So fügen Sie HTML -Elemente über JavaScript mithilfe von InsertBeforen () -Methode hinzu
Wenn Sie ein HTML -Element als untergeordneter Knoten vor dem angegebenen Knoten einfügen möchten, können Sie die “aufrufen“InsertBefore ()”JavaScript -Methode.
Syntax der InsertMethod () -Methode
Elternknoten.InsertBefore (newnode, vorhandener Node);Hier das "Newnode"Ist das neu erstellte HTML -Element, das Sie hinzufügen möchten"vorhandenerIst das Element, vor dem Sie Ihr HTML -Element einfügen, und das “ElternknotenIst das HTML -Element, das Sie als übergeordnete Knoten angegeben haben.
Beispiel: So fügen Sie HTML -Elemente über JavaScript mithilfe von InsertBeforen () -Methode hinzu
Im vorherigen Beispiel haben wir die Methode appendChild () zum Hinzufügen des neuen HTML -Elements als letztes Kind des übergeordneten HTML verwendet. Sie können jedoch auch das JavaScript verwenden “InsertBefore ()Methode zum Hinzufügen eines HTML -Elements vor dem angegebenen Element. Das folgende Beispiel lehrt Ihnen die Verwendung von “InsertBefore ()" Methode.
Erstens werden wir eine Überschrift und einige Absätze wie folgt hinzufügen:
Dies ist LinuxHint.com
Hinzufügen von HTML -Elementen über JavaScript.
Dies ist der Hauptabsatz.
Dies ist der zweite Absatz.
Als nächstes werden wir ein neues Element erstellen “Absatz”HTML -Element und dann einen untergeordneten Textknoten dafür definieren:
Die Ausführung des oben gegebenen Programms fügt das hinzu “Absatz"HTML vorher"P1”:
So löschen
Das JavaScript "entfernen()Die Methode wird zum Löschen des angegebenen HTML -Elements aus dem DOCKEL -Objektmodell (DOM) verwendet.
Syntax von REDE () Methode
Knoten.entfernen()Hier, "Knoten”Repräsentiert das HTML -Element, das Sie über JavaScript löschen möchten.
Beispiel: So löschen
Im unteren Bereich haben wir ein HTML-Element, einen Absatz hinzufügen
und ein Element, das zwei Absätze und als Kinderknoten umfasst:
Dies ist LinuxHint.com
Hinzufügen von HTML -Elementen über JavaScript.
Dies ist der Hauptabsatz.
Dies ist der zweite Absatz.
Als nächstes werden wir eine Taste hinzufügen und eine anschließen “ONCLICKEvent -Handler. Gemäß dem folgenden Code klicken wir auf die “, wenn wir auf die“ klicken werdenElement entfernen"Knopf, es wird das aufrufen"myfunction ()" Methode:
Im "myfunction ()"Methode, zuerst verwenden wir das"dokumentieren.GetelementById„Um das Element zu finden, das wir löschen möchten, indem wir es angeben“Ausweis"Dann werden wir uns aufrufen"entfernen()" Methode:
Die untergegebene Ausgabe bedeutet das “P1"HTML wird mit Hilfe des" aus unserem JavaScript -Programm gelöscht "entfernen()Funktion:
So löschen
In JavaScript die “removechild ()”Wird zum Löschen eines bestimmten HTML -Knotens für untergeordnete HTML aus einem HTML -Element verwendet.
Syntax von removechild () Methode
Elternknoten.Removchild (Childnode)Hier ist der ParentNode das HTML -Element, das wir als “angegeben haben“ElternteilNode und Childnode ist das HTML -Element, das wir aus dem übergeordneten Element entfernen möchten.
Beispiel: So löschen
In diesem Beispiel werden wir versuchen, das untergeordnete Element unseres definierten HTML -Elements zu entfernen:
Dies ist LinuxHint.com
Hinzufügen von HTML -Elementen über JavaScript.
Dies ist der Hauptabsatz.
Dies ist der zweite Absatz.
Um ein untergeordnetes Element zu löschen, müssen Sie zunächst ein "erstellen"Elternteil”HTML -Element und geben Sie das HTML -Element an, das als Elternteil in Ihrem JavaScript -Code fungiert. In unserem Fall haben wir hinzugefügt “Div1”:
Wie Sie sehen, dass das untergeordnete Element des HTML -Elements erfolgreich gelöscht wird:
Abschluss
Um ein HTML -Element in Ihr JavaScript -Programm hinzuzufügen, können Sie die Methode appendChild () und insertbefore () verwenden, während zum Löschen eines spezifischen HTML -Elements oder eines untergeordneten HTML -Knotens, REMOVEPEL () und REMOVECHILD () Methoden nach Ihren verwendet werden Anforderungen. In diesem Artikel wurde besprochen, wie Sie die HTML-Elemente über JavaScript hinzufügen oder löschen können. Wir haben auch die Verwendung von Methoden appendChild () und Insertbefore () zum Hinzufügen der HTML -Elemente gezeigt. Darüber hinaus werden in diesem Artikel auch Beispiele zum Löschen der HTML -Elemente zur Löschung der HTML -Elemente bereitgestellt.