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

How to Move an Element into Another Element

Moving one DIV element inside another can be achieved using the jQuery function, appendTo() or prependTo().

appendTo() Function:

The appendTo() function takes a single parameter, the selector for the destination element, and appends the selected element(s) to the end of the destination.

Example:

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

This will move the DIV element with the id "source" and all its children inside the DIV element with the id "destination".

prependTo() Function:

The prependTo() function is similar to appendTo(), but instead of appending to the end, it appends the selected element(s) to the beginning of the destination.

Example:

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

This will move the DIV element with the id "source" and all its children to the beginning of the DIV element with the id "destination".

Example:

Consider the following HTML markup:

<div>

The following jQuery code would move the "source" DIV and all its contents inside the "destination" DIV:

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

The resulting HTML would be:

<div>

The above is the detailed content of How to Move a DIV Element Inside Another Using jQuery\'s `appendTo()` and `prependTo()`?. For more information, please follow other related articles on the PHP Chinese website!