Comment imbriquer un élément DOM dans un autre à l'aide de appendTo et prependTo ?

Déplacement d'éléments DOM : comment imbriquer un élément dans un autre

Dans le développement Web, il devient souvent nécessaire de déplacer des éléments dans la structure DOM , que ce soit pour des raisons esthétiques ou fonctionnelles. L'une de ces exigences consiste à déplacer un élément DIV spécifique dans un autre élément DIV existant.

Problème :

Supposons que vous ayez deux éléments DIV : "source" et "destination". Vous souhaitez déplacer "source" et ses éléments enfants dans "destination" afin qu'il devienne un élément imbriqué de "destination".

Solution :

Utilisation de appendTo :

La fonction appendTo est couramment utilisée pour insérer un élément à la fin d'un autre élément. Par exemple :

$("#source").appendTo("#destination");

Cette méthode ajoutera « source » (y compris son contenu) à la fin de « destination ».

Utilisation de prependTo :

Alternativement, la fonction prependTo ajoute un élément au début d'un autre élément. Par exemple :

$("#source").prependTo("#destination");

Exemple :

Considérez l'extrait de code suivant :

<div>

$("#appendTo").click(function() {
  $("#moveMeIntoMain").appendTo($("#main"));
});
$("#prependTo").click(function() {
  $("#moveMeIntoMain").prependTo($("#main"));
});

Lorsque le bouton "appendTo" est enfoncé, "moveMeIntoMain" est ajouté à la fin de "main". Cliquer sur le bouton "prependTo" insère "moveMeIntoMain" au début de "main".

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!