Home >Web Front-end >JS Tutorial >How to Move a DIV Element Inside Another Using jQuery\'s `appendTo()` and `prependTo()`?

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

Barbara Streisand
Barbara StreisandOriginal
2024-11-28 20:14:13847browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn