So fügen Sie Elemente in JQuery schrittweise hinzu

jQuery kann als beliebte JavaScript-Bibliothek nicht nur die Entwicklungseffizienz verbessern, sondern auch den Code einfacher und verständlicher machen. Bei der Entwicklung von Webseiten verwenden wir normalerweise jQuery, um HTML-Elemente hinzuzufügen, zu ändern und zu löschen.

In vielen Fällen müssen wir Elemente schrittweise hinzufügen, dh neue Unterelemente zu vorhandenen Elementen hinzufügen. Zu diesem Zeitpunkt können die Methoden append() und prepend() von jQuery nützlich sein. Diese beiden Methoden gehören zu den am häufigsten verwendeten Methoden in jQuery. Sie können untergeordnete Elemente am Ende bzw. am Kopf des Elements hinzufügen.

Zunächst müssen wir die Verwendung und die Unterschiede dieser beiden Methoden verstehen.

append()- und prepend()-Methoden

append()

append()-Methode fügt Inhalt nach dem letzten untergeordneten Element eines vorhandenen Elements ein. Hier ist ein Beispielcode:

$(document).ready(function(){
  $("p").append(" 这是新的内容。");
});

Dadurch werden allen

-Elementen neue Inhalte hinzugefügt. Wenn Sie allen Elementen im Dokument neuen Inhalt hinzufügen möchten, können Sie dies folgendermaßen verwenden: Die Methode

$(document).ready(function(){
  $("*").append(" 这是新的内容。");
});

prepend()

prepend() fügt Inhalt vor dem ersten untergeordneten Element eines vorhandenen Elements ein. Hier ist ein Beispielcode:

$(document).ready(function(){
  $("p").prepend(" 这是新的内容。");
});

Dadurch werden allen

-Elementen neue Inhalte hinzugefügt. Wenn Sie allen Elementen im Dokument neuen Inhalt hinzufügen möchten, können Sie es wie folgt verwenden:

$(document).ready(function(){
  $("*").prepend(" 这是新的内容。");
});

Elemente schrittweise hinzufügen

Wenn wir neue Unterelemente zu vorhandenen Elementen hinzufügen müssen, können Sie append() oder prepend verwenden ()-Methode. Hier ist ein Beispielcode:

$(document).ready(function(){
  $(".container").append("<div> 这是新增的元素。</div>");
});

Dadurch wird ein neues Element nach dem letzten untergeordneten Element eines Elements mit Klassennamencontainer hinzugefügt.

$(document).ready(function(){
  $(".container").prepend("<div> 这是新增的元素。</div>");
});

Dadurch wird ein neues Element vor dem ersten untergeordneten Element des Elements mit Klassennamencontainer hinzugefügt.

Wenn wir jedem Element dieselben untergeordneten Elemente hinzufügen müssen, können wir die Methode every() verwenden, um die Elemente einzeln zu iterieren und sie schrittweise hinzuzufügen.

$(document).ready(function(){
  $("p").each(function(){
    $(this).append(" 这是新增的内容。");
  });
});

Dadurch wird jedem

-Element derselbe Inhalt hinzugefügt.

Fazit

Beim schrittweisen Hinzufügen von Elementen können wir die Methoden append() und prepend() in jQuery verwenden. Diese Methoden bieten eine schnelle und einfache Möglichkeit, HTML-Elemente zu ändern. Wir können auch die Methode every() verwenden, um über mehrere Elemente zu iterieren und denselben Vorgang auszuführen. Dies kann uns helfen, schnell interaktive, reichhaltige Webseiten zu erstellen und die Entwicklungseffizienz zu verbessern.

Das obige ist der detaillierte Inhalt vonSo fügen Sie Elemente in JQuery schrittweise hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!