jQuery Schnellstart – Inhalte & Elemente hinzufügen

Du lernst in dieser Lektion, wie Du mit jQuery neue Elemente oder Inhalte in das Dokument einfügen kannst.

jQuery bietet verschiedene Methoden, wie append(), prepend(), html(), text(), before(), after(), wrap() usw., die es uns ermöglichen, neue Inhalte in ein bestehendes Element einzufügen.

Die jQuery-Methoden html() und text() wurden bereits in der vorigen Lektion gezeigt. Daher werden wir in diesem Kapitel auf die restlichen Methoden eingehen.

after() Methode

Die jQuery after()-Methode fügt den Inhalt (neue oder vorhandene DOM-Elemente) nach dem Zielelement ein, das durch einen Selektor angegeben wird.

$("Selektor").after("Inhalt");

Gib zunächst einen Selektor an, um die Referenz des Zielelements/der Zielelemente zu erhalten, nach dem/denen Du den Inhalt hinzufügen möchtest, und rufe dann die after()-Methode auf. Übergebe den Inhaltstring als Parameter. Die Inhaltszeichenfolge kann jedes gültige HTML-Element sein.

<script>
<div id="div-1">Div 1</div>
<div id="div-2">Div 2</div>

<script>
  $(document).ready(function () {  
    $('#div-1').after('<div style="background: #ffa700">Neues Div-Element</div>');  
  });
</script>

 

before() Methode

Die before()-Methode fügt den Inhalt (neue oder vorhandene DOM-Elemente) vor dem Zielelement ein, das durch einen Selektor angegeben wird.

Gib einen Selektor an, um die Referenz des Zielelements zu erhalten, vor dem Du den Inhalt hinzufügen möchtest. Rufe dann die Methode before() auf. Übergebe die Inhaltszeichenfolge, die jedes gültige HTML-Element sein kann, als Parameter.

<div id="div-1">Div 1</div>
<div id="div-2">Div 2</div>

<script>
  $(document).ready(function () {  
    $('#div-1').before('<div style="background: #ffa700">Neues Div-Element</div>');  
  });
</script>

 

append() Methode

Die jQuery append()-Methode fügt den Inhalt an das Ende des Zielelements/der Zielelemente ein, das/die durch einen Selektor angegeben wird/sind.

Gib zunächst einen Selektorausdruck an, um die Referenz eines oder mehrerer Elemente zu erhalten, an die Du Inhalt anhängen möchtest, rufe dann die Methode append() auf und übergebe die Inhaltszeichenfolge als Parameter.

<script>
  $(document).ready(function () {  
    // Fügt "LerneProgrammieren!" an das Ende des Textes
    $('p').append('LerneProgrammieren!');
  });
</script>

 

prepend() Methode

Die prepend()-Methode fügt den Inhalt am Anfang eines durch einen Selektor spezifizierter Elemente ein.

Gib zuerst einen Selektorausdruck an, um die Referenz eines Elements zu erhalten, dem Du den Inhalt voranstellen möchtest, rufe dann die Methode prepend() auf und übergebe die Inhaltszeichenfolge als Parameter.

<script>
  $(document).ready(function () {  
    // Fügt "Hallo" an den Anfang des Textes
    $('p').prepend('Hallo');
  });
</script>

 

wrap() Method

Die wrap()-Methode umhüllt jedes Zielelement mit dem angegebenen Inhaltselement.

Gib einen Selektor an, um Zielelemente abzurufen, und rufe dann die wrap-Methode auf. Übergebe die Inhaltszeichenfolge, um das Zielelement zu wrappen.

<script>
  $(document).ready(function() {
    $("span").wrap("<h1></h1>");
  });
</script>

Fazit

In dieser Lektion hast Du gelernt, wie Du mit jQuery neue Elemente oder Inhalte in ein Dokument einfügst. Probiere alle hier aufgeführten Methoden after(), before(), prepend(), append() und wrap() aus, bevor Du weitermachst. Die append()-Methode wirst Du beispielsweise für die letzte Code-Challenge benötigen 😉

Wenn wir Elemente hinzufügen können, gibt es auch eine Möglichkeit diese zu löschen. Wie das funktioniert erfährst du in der nächsten Lektion.