Copier, remplacer ou supprimer des éléments du DOM

30 min Niveau 4

Introduction

JQuery permet de copier, remplacer ou supprimer des éléments ou du contenu dans le DOM.

Copier ou cloner des éléments HTML avec jQuery

La méthode clone() permet de créer une copie d'un élément ou d'une série d'éléments ainsi que le contenu y étant rattaché.

Une fois un élément copié, Il ne reste qu’à utiliser une méthode jQuery pour placer la copie à l’endroit souhaité dans le dans le DOM.

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

$(document).ready(function(){
    // copie des éléments ayant pour classe "container" et stockage
    // de cette copie dans la variable "container"
    let container = $(".container").clone();
    // intégration de la copie juste avant la fermeture de l'élément
    // <body>
    container.appendTo("body");
});

Après exécution :

<!-- Code HTML après exécution -->
<body>
    <div class="container">
        <h1>Cours jQuery</h1>
        <p id="text">Un paragraphe</p>
        <p id="text2">Un deuxième paragraphe</p>
    </div>
    <div class="container">
        <h1>Cours jQuery</h1>
        <p id="text">Un paragraphe</p>
        <p id="text2">Un deuxième paragraphe</p>
    </div>
</body>

Se connecter pour voir la suite

Besoin d'aide ?

Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !