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");
});