Insérer ou déplacer des éléments et leur contenu dans le DOM

Introduction

JQuery dispose de nombreuses manières pour insérer du contenu dans le DOM. Il est possible de classer ces méthodes selon les 3 catégories suivantes :

• Une méthode qui permet d'insérer du contenu dans un élément HTML, c'est-à-dire qui crée un élément enfant de la sélection initiale.
• Une méthode qui permet d'insérer du contenu avant ou après l'élément HTML, c'est-à-dire qui crée un élément de même niveau (frère) que la sélection initiale.
• Une méthode qui permet d'insérer du contenu autour d'un élément HTML, c'est-à-dire qui crée un élément parent de la sélection initiale.

Insérer du contenu dans un élément

En plus des méthodes html() et text() déjà présentées, jQuery fournit quatre méthodes pour insérer du contenu ou des éléments dans d'autres éléments : prepend(), append(), prependTo() et appendTo().

Les méthodes prepend() et append() nous permettront d'insérer du contenu en tant que premier et dernier élément enfant de l'élément cible, respectivement. Le contenu à insérer doit être passé en paramètre de ces méthodes.

<!-- Code HTML de base -->
<div class="container">
    <h1>Cours jQuery</h1>
    <p id="text">Un paragraphe</p>
    <p id="text2">Un deuxième paragraphe</p>
</div>

$(document).ready(function(){
    // ajout d'un contenu au début des éléments disposants de la
    // classe "container"
    $(".container").prepend("<p>Je suis ajouté avec prepend()</p>");
    // ajout d'un contenu à la fin des éléments disposants de la
    // classe "container"
    $(".container").append("<ul><li>Element</li><li>Element</li></ul>")
});

<!-- Code HTML une fois le jQuery exécuté -->
<div class="container">
    <p>Je suis ajouté avec prepend()</p>
    <h1>Cours jQuery</h1>
    <p id="text">Un paragraphe</p>
    <p id="text2">Un deuxième paragraphe</p>
    <ul>
        <li>Element</li>
        <li>Element</li>
    </ul>
</div>

Les méthodes prependTo() et appendTo() permettent d'effectuer les mêmes opérations que prepend() et append(). La différence entre ces deux ensembles de méthodes réside dans leur syntaxe : en utilisant prependTo() et appendTo(), le contenu à insérer sera avant la méthode et sera inséré dans l'élément spécifié en paramètre.

$(document).ready(function(){
    $("<p>Je suis ajouté avec prepend()</p>").prependTo(".container");
    $("<ul><li>Element</li><li>Element</li></ul>").appendTo(".container");
});

Insérer du contenu avant ou après un élément

Pour insérer du contenu avant ou après un élément, jQuery nous propose d’utiliser l’une des quatres méthodes before(), after(), insertBefore() ou insertAfter().

Les méthodes before() et after() permettent respectivement d'ajouter du contenu avant et après la sélection d'un élément. Le contenu à ajouter doit être passé en argument.

Les méthodes insertBefore() et insertAfter() permettent d'effectuer les mêmes opérations que before() et after(). Là encore, il s'agit d'une différence syntaxique : il faut ici spécifier le contenu à ajouter avant la méthode, et passer la sélection de l'élément auquel le contenu doit être ajouté comme argument.

<!-- Code HTML de base -->
<div class="container">
    <h1>Cours jQuery</h1>
    <p id="text">Un paragraphe</p>
    <p id="text2">Un deuxième paragraphe</p>
</div>

$(document).ready(function(){
    $("#text").before("<p>Je suis ajouté avec before()</p>");
    $("<span>Je suis ajouté avecinsertAfter()</span>").insertAfter("#text");
});

Après exécution :

<!-- Code HTML une fois le jQuery exécuté -->
<div class="container">
    <h1>Cours jQuery</h1>
    <p>Je suis ajouté avec before()</p>
    <p id="text">Un paragraphe</p>
    <span>Je suis ajouté avec insertAfter()</span>
    <p id="text2">Un deuxième paragraphe</p>
</div>