Maison >interface Web >js tutoriel >Comment déplacer un élément DIV à l'intérieur d'un autre à l'aide de « appendTo() » et « prependTo() » de jQuery ?

Comment déplacer un élément DIV à l'intérieur d'un autre à l'aide de « appendTo() » et « prependTo() » de jQuery ?

Barbara Streisand
Barbara Streisandoriginal
2024-11-28 20:14:13738parcourir

How to Move a DIV Element Inside Another Using jQuery's `appendTo()` and `prependTo()`?

Comment déplacer un élément dans un autre élément

Le déplacement d'un élément DIV dans un autre peut être réalisé à l'aide de la fonction jQuery, appendTo() ou prependTo().

appendTo() Fonction :

Le La fonction appendTo() prend un seul paramètre, le sélecteur de l'élément de destination, et ajoute le ou les éléments sélectionnés à la fin de la destination.

Exemple :

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

Cela permettra déplacez l'élément DIV avec l'identifiant "source" et tous ses enfants à l'intérieur de l'élément DIV avec l'identifiant "destination".

prependTo() Fonction :

La fonction prependTo() est similaire à appendTo(), mais au lieu d'ajouter à la fin, elle ajoute le ou les éléments sélectionnés au début de la destination.

Exemple :

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

Cela déplacera l'élément DIV avec l'identifiant "source" et tous ses enfants au début de l'élément DIV avec l' id "destination".

Exemple :

Considérez le balisage HTML suivant :

<div>

Le code jQuery suivant déplacerait la "source" DIV et tout son contenu à l'intérieur du DIV "destination" :

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

Le HTML résultant serait être :

<div>

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn