Latest web development tutorials

jQuery Elemente hinzufügen

Mit jQuery können Sie ganz einfach neue Elemente / Inhalte hinzufügen.

Fügen Sie einen neuen HTML-Inhalt

Wir werden lernen, neue Inhalte für vier jQuery Methode hinzufügen:

  • anhängen () - am Ende des ausgewählten Elements einfügen
  • prepend () - Legen Sie am Anfang des ausgewählten Elements
  • nach () - Legen Sie nach der ausgewählten Elemente zu sein
  • vor () - Legen Sie vor ausgewählten Elemente

jQuery append () -Methode

jQuery append () -Methode fügt den Inhalt am Ende des ausgewählten Elements.

Beispiele

. $ ( "P") anhängen ( " Text anfügen");

Versuchen »

jQuery prepend () -Methode

jQuery prepend () -Methode fügt den Inhalt am Anfang des ausgewählten Elements.

Beispiele

. $ ( "P") prepend ( " Text am Anfang anhängen");

Versuchen »

Fügen Sie mehrere neue Elemente von append () und prepend () -Methode

Im obigen Beispiel sind wir erst am Anfang des ausgewählten Elements / Ende Einfügen von Text / HTML.

Allerdings anhängen () und prepend () -Methode kann eine unbegrenzte Anzahl von neuen Elementen durch den Parameter erhalten. Sie können einen Text / HTML (wie im Beispiel oben) von jQuery oder durch JavaScript-Code und DOM-Elemente erzeugen.

Im folgenden Beispiel erstellen wir einige neue Elemente. Diese Elemente können Text / HTML erstellt, jQuery oder JavaScript / DOM. Dann haben wir () -Methode dieser neuen Elemente anhängen dem Text hinzugefügt (für prepend () gleichermaßen effektiv):

Beispiele

Funktion appendText () { var txt1 = "<p> Text </ p>."; // erstellen Text HTML - Tags var . Txt2 = $ ( "<p > </ p>") Text ( " Text."); // Erstellen Text mit jQuery var . Txt3 = Dokument createelement ( "p ") ;. txt3 innerHTML- = " text."; // Erstellen Text Text mit DOM DOM $ ( "Body") append ( txt1, txt2, txt3) ;. // Fügen Sie das neue Element }

Versuchen »

jQuery nach () und vor () -Methode

jQuery nach () -Methode Inhalt nach dem ausgewählten Element einzufügen.

jQuery vor () -Methode vor dem ausgewählten Element Einfügungen.

Beispiele

$ ( "Img") nach ( " nach dem Add Text") ;. $ ( "Img ") vor ( " Add Text vor");

Versuchen »

Durch eine Reihe von neuen Elementen nach Zugabe von () und vor () Methode

nach () und vor () Methode kann eine unbegrenzte Anzahl von neuen Elementen durch den Parameter empfangen. Sie können neue Elemente über Text / HTML erstellen, jQuery oder JavaScript / DOM.

Im folgenden Beispiel erstellen wir einige neue Elemente. Diese Elemente können Text / HTML erstellt, jQuery oder JavaScript / DOM. Wir haben dann nach () Methoden dieser neuen Elemente in den Text (der vor () gleich wirksam):

Beispiele

Funktion after () { var txt1 = "<b> I < / b>"; // erstellen Elemente mit Hilfe von HTML var txt2 = $ ( "<i> </ i>") Text ( "Liebe") ;. // Elemente erstellen jQuery var txt3 = document createelement ( "groß" ) ;. // erstellen Elemente des DOM txt3 innerHTML- = "jQuery!"; . $ ( "img") nach (txt1, txt2, txt3) ;. // Text im Bild hinzufügen }

Versuchen »