HTML -Elemente Manipulation durch JavaScript
Diese Beschreibung wird diskutieren HTML -Elemente manipulieren durch JavaScript. Wir werden auch das Verfahren zum Hinzufügen von HTML -Elementen, das Anhängen von HTML -Elementen, das Ändern von Inhalten von HTML -Elementen, das Finden und Erhalten von HTML -Elementen und das Entfernen von HTML -Elementen und ihre Kinderknoten erläutern. Darüber hinaus werden die Beispiele für appendChild (), Insertbefore (), Innerhtml -Eigenschaft, GetelementById (), GetelementByClassName (), QuerySelectorAll (), REMEB () und Removechild () () bereitgestellt. 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 wurde.
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 an
Wenn Sie ein HTML -Element als untergeordneter Knoten vor dem angegebenen Knoten anhängen 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 appendieren Sie HTML -Elemente über JavaScript mithilfe von InsertBeforen () -Methode
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”:
Wie ändert
Der HTML DOM ermöglicht es Ihnen, den HTML -Inhalt mithilfe der “zu ändernInnerhtml" Eigentum. Der "Innerhtml”Wird normalerweise in Webseiten verwendet, um dynamische HTML -Inhalte wie Kommentarformulare, Registrierungsformulare und Links zu generieren.
Syntax der Innerhtml JavaScript -Eigenschaft
Element.Innerhtml = WertHier, "ElementIst das HTML -Element, das Sie ausgewählt haben, um seinen Inhalt zu ändern, und “Wert”Ist der Inhalt, den wir festlegen werden.
Beispiel 1: Ändern des Inhalts von HTML -Elementen durch JavaScript
In diesem Beispiel wird Ihnen angezeigt, wie Sie das verwendenInnerhtml”JavaScript -Eigenschaft, um den Inhalt eines HTML -Elements zu ändern. Erstens werden wir ein Überschriftenelement mit dem hinzufügen
Überschrift Tag und ein Absatz mit dem
HTML -Tag:
Ändern Sie HTML -Elemente mit JavaScript
Eine Testzeichenfolge
Jetzt wollen wir den Inhalt der “ändern“"Element mit der ID"P1”. Dazu werden wir das „Dokument verwenden.GetElementById () ”Methode, um das angegebene Element zu erhalten. Danach werden wir den Inhalt unserer festlegen
Element zu “Dies ist LinuxHint.com”:
Wir haben den Inhalt des obigen Absatzes geändert
Schauen Sie sich die untergegebene Ausgabe an, die wir durch die Ausführung des oben gegebenen Programms erhalten haben:
So finden und erhalten Sie HTML -Elemente per ID über JavaScript
Die meisten Javascript -Entwickler nutzten die GetElementById () Methode zum Auffinden und Erhalten von HTML -Elementen mit eindeutigen IDs. Wenn Sie eine ID bestanden haben, die keinem HTML -Element gehört, zeigt die Methode getElementById () den Nullwert an.
Syntax der GetElementById () -Methode
dokumentieren.GetElementById (elementId)Hier das "elementid„Repräsentiert die eindeutige ID des HTML.
Beispiel: Finden und holen Sie HTML -Elemente per ID über JavaScript
Im folgenden Beispiel werden wir HTML -Elemente wie eine Überschrift mit dem hinzufügen
Tag und drei Absatzelemente mit dem
Schild. Beachten Sie, dass wir auch hinzugefügt haben “IDS”Mit den Absatzelementen:
Dies ist LinuxHint.com
Finden und erhalten Sie HTML -Elemente per ID in JavaScript
Dies ist ein JavaScript -Programm, das die Methode "getElements byid" verwendet
Im nächsten Schritt werden wir das Element mit der ID finden und bekommen “P1"Durch die Verwendung der"dokumentieren.GetElementById ()" Methode. Nach dem Ding werden wir den Inhalt des abgerufenen HTML -Elements ändern:
So finden und erhalten Sie HTML -Elemente nach Klassenname über JavaScript
Der "GetElements byclassName ()Die Methode wird zum Auffinden und Erhalten von HTML -Elementen mit derselben Klasse verwendet. Wenn Sie versuchen, ein HTML -Element durch die Verwendung des Klassennamens zu erhalten, gibt der JavaScript -Interpreter alle Objekte zur gleichen Klasse zurück. Danach können Sie bestimmte Operationen für diese HTML -Elemente ausführen.
Syntax von GetElementsByClassName () -Methoden
dokumentieren.GetElements ByClassName (Klassenname)Hier das "Klassenname”Repräsentiert den Klassennamen der HTML -Elemente, die Sie benötigen, um Ihr Programm zu finden und zu bekommen.
Beispiel: Finden und holen Sie HTML -Elemente nach Klassenname über JavaScript
Im folgenden Beispiel haben wir eine Überschrift und einige Absatzelemente mit dem Klassennamen hinzugefügtC1”:
Dies ist LinuxHint.com
Finden und erhalten Sie HTML -Elemente nach Klassennamen in JavaScript
Text im ersten Absatz
Text im zweiten Absatz
Als nächstes werden wir nach den HTML -Elementen suchen, die haben "C1”Als Klasse verwenden Sie die Methode GetElementsByClassName () und speichern die Sammlungen der Objekte in“A”:
Hier ist die Ausgabe, die wir durch die Ausführung des oben gegebenen JavaScript-Programms erhalten haben:
So finden und erhalten Sie HTML -Elemente von CSS Selector über JavaScript
In HTML die QuerySelectorAll () Die Methode gibt ein statisches Nodelist -Objekt zurück, das eine Sammlung der untergeordneten Elemente eines Elements umfasst, das mit den angegebenen CSS -Selektoren übereinstimmt. Indexnummern werden verwendet, um die Knoten ab 0 zu finden und zu erhalten.
Syntax der QuerySelectorAll () -Methode
Element.QuerySelectorall (Selektoren)Die QuerySelectorAll () -Methode nimmt an “SelektorenAls Argument; Eine DOM -Zeichenfolge umfasst einen oder mehrere gültige CSS -Selektoren.
Beispiel: Finden und holen Sie HTML -Elemente von CSS Selector über JavaScript
Im untergezogenen JavaScript-Programm haben wir die Methode querySelectorAll () verwendet, um die Absatz-HTML-Elemente mit "zu erhalten" mit "Erzielung des Absatzes" mit "Ermittlung"C1”Als Klassenname:
Dies ist LinuxHint.com
Finden und erhalten Sie HTML -Elemente nach Klassennamen in JavaScript
Text im ersten Absatz
Text im zweiten Absatz
Schauen Sie sich die Ausgabe der JavaScript -QuerySelectorAll () -Methode an:
Die Ausführung des oben gegebenen JavaScript-Programms zeigt die folgende Ausgabe an:
So entfernen Sie HTML -Elemente über JavaScript mithilfe von REME () -Methode
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: Entfernen Sie die HTML -Elemente über JavaScript mithilfe von REME () -Methode
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 entfernen Sie unter Verwendung von Removechild () -Methoden
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.
Entfernen Sie unter Verwendung der RemoveChild ()
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
Das Dokumentobjektmodell (DOM) in JavaScript ist eine Entwicklerschnittstelle, mit der Sie das Design, die Struktur und den Inhalt der HTML -Elemente Ihrer Website manipulieren können. In diesem Artikel wurde besprochen, um HTML-Elemente durch JavaScript zu manipulieren. Wir haben auch das Verfahren für das Hinzufügen von HTML -Elementen, das Anhängen von HTML -Elementen, das Ändern des Inhalts von HTML -Elementen, das Finden und Erhalten von HTML -Elementen und das Entfernen von HTML -Elementen und deren Kinderknoten erklärt. Darüber hinaus werden die Beispiele für appendChild (), Insertbefore (), Innerhtml -Eigenschaft, GetelementById (), GetElementsByClassName (), QuerySelectorAll (), REMEB () und RemoveChild () () () zur Verfügung gestellt.