JavaScript appendieren Daten an Div

Bei der Pflege einer Webseite oder einer Website gibt es Situationen, in denen von Zeit zu Zeit ein Update erforderlich ist. In einem solchen Fall müssen einige Daten zu einer bestimmten Eingabe der Benutzer angehängt werden, um die Datensätze zu erstellen und zu verwalten. Darüber hinaus ist das Anhängen von Daten an DIV auch bei der Integration von HTML in JavaScript, um zusätzliche Funktionen anzuwenden.

So fügen Sie Daten an DIV in JavaScript an?

Die folgenden Ansätze können verwendet werden, um Daten in JavaScript an DIV anzuhängen:

• “Innerhtml" Eigentum.
• “InsertAdjacentHtml ()" Methode.
• “appendChild ()" Methode.
• “JQuery" Ansatz.

Ansatz 1: Gehen Sie Daten an DIV in JavaScript mit der Innerhtml -Eigenschaft an

Der "InnerhtmlEigenschaft gibt den inneren HTML -Inhalt des Elements zurück.Dieser Ansatz kann angewendet werden, um Daten an das enthaltene Bild und die Schaltfläche in der “anzuhängendiv”Element auf der Schaltfläche Klicken Sie auf.

Syntax

Element.Innerhtml

In der angegebenen Syntax:

• “Element”Bezieht sich auf das Element, auf das der HTML -Inhalt zurückgegeben wird.

Beispiel

Schauen wir uns die folgenden Codezeilen an:

Klicken Sie hier, um Daten anzuhängen

Im obigen Code:

• Präzisiere das "div"Element mit dem angegebenen"Ausweis”.
• Fügen Sie danach ein Bild in das DIV -Element ein.
• Erstellen Sie außerdem eine Schaltfläche innerhalb des DIV -Elements mit einem Anhang “ONCLICK”Ereignisumleitung zur Funktion appendData ().

Gehen Sie mit dem JavaScript -Teil des Codes fort:

Befolgen Sie im JS -Teil des Codes den folgenden Schritten:

• Eine Funktion namens deklarieren “appendData ()”.
• In seiner Definition zugreifen Sie auf die “divElement aus seiner ID mit der “dokumentieren.GetElementById ()" Methode.
• Schließlich wenden Sie das an “InnerhtmlEigenschaft, um die angegebene Nachricht zusammen mit dem mitgelieferten Bild und der Schaltfläche erstellt zu haben, in der “div”.

Ausgang

Es kann in der obigen Ausgabe beobachtet werden, dass die angegebene Nachricht mit dem Bild auf der Schaltfläche Klick angehängt ist.

Ansatz 2: Gehen Sie Daten an DIV in JavaScript mit der Methode InsertAdjacentHTML () an

Der "InsertAdjacentHtml ()Die Methode fügt HTML -Daten in die angegebene Position ein.Diese Methode kann verwendet werden, um die Daten am Ende der “anzuhängen“div”Bei Auswahl einer bestimmten Option.

Syntax

Element.InsertAdjacentHtml (Position, HTML)

In der obigen Syntax:

• “Position”Bezieht sich auf die Position im Verhältnis zum Element.
• “html”Zeigt auf die zu eingefügte HTML.

Beispiel

Schauen Sie sich den folgenden Code -Snippet an:

Ist JavaScript eine Programmiersprache?

Ja
NEIN

Im obigen HTML -Code:

• Wiederholen Sie die besprochenen Schritte zum Einbeziehung der “div"Element mit dem angegebenen"Ausweis”.
• Geben Sie auch die angegebene Überschrift in die “ein

  " Schild.

• Danach zwei “einschließen“RadioSchaltflächen mit einem auf die Funktion appendData (). Dies führt dazu, dass die Daten nur bei der Auswahl der Option angehängt werden “Ja”.

Gehen Sie mit dem JavaScript -Teil des Codes fort:

Befolgen Sie im obigen JS -Code folgende Schritte:

• Eine Funktion namens deklarieren “appendData ()”.
• In seiner Definition zugreifen Sie auf die “div”Element ähnlich mit der“dokumentieren.GetElementById ()" Methode.
• Schließlich wenden Sie die “an“InsertAdjacentHtml ()Methode, indem Sie die “angeben“Position”Als erster Parameter, um die angegebenen Daten anzuhängen. In diesem Szenario werden die Daten am Ende angehängt.

Ausgang

In der obigen Ausgabe ist es offensichtlich, dass das “Erfolg"Nachricht wird nur beim Klicken auf die Option beigefügt"Ja”.

Ansatz 3: Anhilfe der Methode appendChild () Daten an DIV in JavaScript anhängen

Der "appendChild ()Die Methode findet ein Knotenelement als das letzte Kind des Elements an. Dieser Ansatz kann verwendet werden, um die Daten am Ende der Schaltfläche Klick ähnlich anzuhängen.

Syntax

Element.appendChild (Knoten)

In der angegebenen Syntax:

• “Knoten”Zeigt der zu angehängte Knoten an.

Randnotiz: Eine zusätzliche Methode “CreateTextNode ()”Wird auch im folgenden Beispiel angewendet. Es wird einfach angewendet, um einen Textknoten zu erstellen.

Beispiel

Folgen wir Schritt für Schritt dem folgenden Beispiel unten:

JavaScript

Klicken Sie hier, um Daten anzuhängen

Im obigen HTML -Code:

• Erinnern Sie sich an die diskutierten Ansätze, um die aufzunehmendiv"Element mit dem angegebenen"AusweisUnd eine Überschrift.
• In ähnlicher Weise geben Sie eine Taste mit dem “anONCLICK”Ereignis beigefügt, das sich auf die Funktion appendData () umgeleitet wird ().

Folgen wir dem angegebenen JavaScript -Teil des Codes:

Führen Sie in diesem Teil des Code die folgenden Schritte aus:

• Definieren Sie eine Funktion namens “appendData ()”.
• In seiner Definition greifen Sie in ähnlicher Weise auf die “zu"div”Element wie diskutiert.
• Wenden Sie im nächsten Schritt die anCreateTextNode ()Methode zum Erstellen des angegebenen Textknotens.
• Schließlich fügen Sie den erstellten Textknoten am Ende der "an" andiv”.

Ausgang

In der Ausgabe ist es offensichtlich, dass der daraus resultierende Absatz an das angehängt istdiv”Auf der Schaltfläche Klicken Sie auf.

Ansatz 4: Daten an Div in JavaScript mit JQuery -Ansatz an DIV anhängen

Der "JQuery"Ansatz kann verwendet werden, um auf die" zuzugreifen "div”Element direkt und fügen Sie eine Überschrift in IT (DIV) bei der Schaltfläche Klick an.

Beispiel

Folgen wir Schritt für Schritt dem folgenden Beispiel unten:

Der Inhalt dieser Website lautet:

Klicken Sie hier, um Daten anzuhängen

Befolgen Sie im obigen Code den unten angegebenen Schritten:

• Fügen Sie die JQuery -Bibliothek für die Anwendung ihrer Methoden ein.
• Wiederholen Sie die Schritte zum Angeben der “div"Element mit dem angegebenen"Ausweis”.
• Innerhalb der "div”, Enthalten die angegebene Überschrift und eine“Taste" mit einem "ONCLICK”Ereignis auf die Funktion appendData ().

Fahren wir mit dem JavaScript -Teil des Codes fort:

Führen Sie im obigen JS -Teil des Codes die folgenden Schritte aus:

• Definieren Sie eine Funktion namens “appendData ()”.
• Greifen Sie in seiner Definition auf das DIV -Element direkt durch seine “zu.“Ausweis”.
• Danach anwenden Sie die “append ()"Methode zum Zugriff"div”Und schließen die angegebenen Überschrift darin ein.

Ausgang

In der Ausgabe führt die Schaltfläche zum Anhängen der resultierenden Überschrift in der “div”.

Diese Beschreibung hat die Ansätze zum Anhängen von Daten an DIV in JavaScript gezeigt.

Abschluss

Der "Innerhtml”Eigentum, die“InsertAdjacentHtml ()”Methode, die“appendChild ()”Methode oder die“JQueryDer Ansatz kann verwendet werden, um Daten in JavaScript an DIV anzuhängen. Die Innerhtml -Eigenschaft kann verwendet werden, um die Daten an das mitgelieferte Bild und eine Schaltfläche in der “anzuhängendiv”Element auf der Schaltfläche Klicken Sie auf. Die InsertAdjacentHTML () -Methode kann angewendet werden, um die Daten in Bezug auf die angegebene Position als Parameter anzuhängen. Die Methode appendChild () in Kombination mit dem “CreateTextNode ()”Methode kann verwendet werden, um zuerst einen Textknoten zu erstellen und ihn dann am Ende der DIV anzuhängen. Der JQuery -Ansatz kann verwendet werden, um das DIV -Element direkt abzurufen und eine Überschrift bei der Schaltfläche Klick anzuhängen. In diesem Blog wurde erklärt, Daten in JavaScript an DIV anzuhängen.