jQuery-DOM-Manipulationen – 2
jQuery-DOM-Manipulationen – 2
jQuery-DOM-Manipulationen – 2 ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 1. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des jQuery Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der jQuery Academy-Kurs umfasst insgesamt 1 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Einführung und append
Hallo,
In unseren bisherigen Beispielen haben wir eine Aktualisierungs- oder Leseoperation für HTML-DOM-Objekte durchgeführt.
Wir lernen nun die Einfügeoperation mit der append()-Methode kennen.
Sehen wir uns ein Beispiel an.
<button id="add">
Add New Item
</button>
<div id="target"></div>
<script>
/*
Listen for an element with
the add id click
*/
$('#add').click(function(){
/*
append '<p>This is the appended
text</p>' to #target element
*/
$("#target").append("<p>Appended text</p>");
})
</script>append
Nach dem Ausführen des obigen Codes fügt die append-Methode den HTML-Code (der als Argument übergeben wurde) am Ende des #test-Elements ein.
prepend
prepend()-Methode
Das Gegenstück zur append()-Methode ist die prepend()-Methode. Die append()-Methode fügt Inhalte am Ende des Inhalts des Zielelements ein, während prepend sie am Anfang einfügt.
<div id="target"></div>
<button id="add">
Add New Item
</button>
<script>
/*
Listen for an element
with the add id click
*/
$('#add').click(function(){
/* append '<p>This is the prepended text</p>'
to #target element
*/
$("#target").prepend("<p>This is the appended text</p>");
})
</script>Frage
Mit den Methoden append und prepend konnten wir am Ende und am Anfang des Zielelements neue HTML-Elemente hinzufügen.
Wie gehen wir also vor, wenn wir das Element als Geschwisterelement des Zielelements hinzufügen möchten?
Beispiel
Setzen wir das vorherige Beispiel fort.
Unser HTML-Knoten sieht im ersten Fall wie folgt aus.
<div id="test">
<p>initial paragraph</p>
</div>after- und before-Methoden
after()- und before()-Methoden
Mit den Methoden after() und before() können wir HTML-Elemente vor und nach dem Zielelement hinzufügen.
Im folgenden Beispielcode wurde ein neues Element in der Geschwisterhierarchie direkt vor und direkt nach dem Element mit der ID #test hinzugefügt.
<div id="test">
<p>initial paragraph</p>
</div>
<script>
$('#test').before('<p>I am before the #test element</p>');
$('#test').after('<p>I am after the #test element</p>');
</script>
Mehrfaches Einfügen
Bisher haben wir die Methoden prepend(), append(), before() und after() kennengelernt. Ich habe vergessen, ein Thema zu erklären. Entschuldigung, manchmal bin ich etwas vergesslich 😇.
Was tun wir also, wenn wir mehr als einen Node gleichzeitig hinzufügen möchten?
Wie im folgenden Beispiel
können wir mehr als einen Node gleichzeitig hinzufügen, indem wir den entsprechenden Methoden mehr als ein Argument übergeben.
<p>
<span id="target"></span>
</p>
<script>
var firstNode = '<p id="first-node">First node</p>';
var secondNode = '<p id="first-node">Second node</p>';
var thirdNode = '<p id="first-node">Third node</p>';
/*
The following four methods work
with the same logic and take
more than one argument.
*/
$('#target').before(firstNode, secondNode, thirdNode);
$('#target').after(firstNode, secondNode, thirdNode);
$('#target').append(firstNode, secondNode, thirdNode);
$('#target').prepend(firstNode, secondNode, thirdNode);
</script>Beispiel für Verkettung
Im obigen Beispiel wurde gleichzeitig mehr als ein Node hinzugefügt. Wie Sie sehen, bleibt die Syntax gleich, auch wenn sich die Nodes in unterschiedlichen Methoden befinden.
Außerdem können wir Code in jQuery durch Verkettung schreiben.
Auf diese Weise können wir kürzeren und effizienteren Code schreiben.
Sehen wir uns das Beispiel an und lernen, wie man verketteten Code in jQuery schreibt.
<p id="test"></p>
<script>
var firstNode = '<p id="first-node">First node</p>';
var secondNode = '<p id="first-node">Second node</p>';
var thirdNode = '<p id="first-node">Third node</p>';
/*
We made our code shorter.
Also, we have done the select operation
on the DOM only once instead of twice.
*/
$('#test').before(firstNode, secondNode, thirdNode)
.after(firstNode, secondNode, thirdNode);
</script>wrap-Methode
wrap()-Methode
Welche Methode verwenden wir, wenn wir das HTML-Element in einen anderen Container einfügen möchten?
Natürlich die wrap()-Methode.
Das folgende Beispiel zeigt eine einfache Verwendung der wrap-Methode.
<div id="target"></div>
<script>
/*
When we apply the code below.
The node we assigned as an argument
will come around our target element.
*/
$("#target").wrap('<div class="container">Container wrapped the target element</div>');
//The result will be as follows
/*
<div class="container">
Container wrapper the target element
<div id="target">
</div>
</div>
*/
</script>
Question
unwrap-Methode
unwrap()-Methode
Für die wrap()-Methode gibt es eine Gegenmethode. Mit der unwrap()-Methode können wir das übergeordnete Element eines Zielelements löschen.
const $ = (selector) => ({
unwrap: () => console.log(`Unwrapped ${selector}`)
});
$("#target").unwrap();empty-Methode
empty()-Methode
Sehen wir uns das Löschen in HTML-Elementen an.
Mit der empty()-Methode können wir alle untergeordneten Elemente und Nachfahren eines Zielelements löschen.
// Removes all descendants of the element from the DOM.
// (Simulated for Node.js environment)
const $ = (selector) => ({
empty: () => console.log(`Removed all descendants of ${selector}`)
});
$("#target").empty();remove()-Methode
remove()-Methode
Die remove()-Methode entfernt nicht nur die Nachfahren des Elements, sondern auch das Element selbst aus dem DOM.
/*
Removes the element and
all descendants of the element from the DOM.
*/
$('#target').remove();Herzlichen Glückwunsch
Herzlichen Glückwunsch 🎉
Wir haben DOM-Manipulationen kennengelernt.
Im nächsten Abschnitt lernen wir das Stylen mit JQuery.
Häufig gestellte Fragen
Ist die Lektion „jQuery-DOM-Manipulationen – 2“ kostenlos?
Ja — der vollständige Text von „jQuery-DOM-Manipulationen – 2“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des jQuery Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der jQuery Academy-Kurs umfasst insgesamt 1 Lektionen.
Was lerne ich in „jQuery-DOM-Manipulationen – 2“?
jQuery-DOM-Manipulationen – 2 Du übst jQuery Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um jQuery Academy zu starten?
Keine Vorkenntnisse erforderlich. jQuery Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 1.
Wie lange dauert die Lektion „jQuery-DOM-Manipulationen – 2“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser jQuery Academy-Lektion Code schreiben und ausführen?
Ja. Jede jQuery Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.