Moving Elements: Appending and Prepending
Consider the need to relocate a DIV element, including its children, from one location ("source") to another ("destination"). The desired outcome is to have the source content nested within the destination container.
Solution:
AppendTo Method:
This method moves the source element to the end of the destination element, becoming its final child:
$("#source").appendTo("#destination");
PrependTo Method:
Alternatively, the prependTo method inserts the source element at the beginning of the destination element, making it the first child:
$("#source").prependTo("#destination");
Example:
To clarify the process, consider the following demonstration:
$("#appendTo").click(function() { $("#moveMeIntoMain").appendTo($("#main")); }); $("#prependTo").click(function() { $("#moveMeIntoMain").prependTo($("#main")); });
#main { border: 2px solid blue; min-height: 100px; } .moveMeIntoMain { border: 1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>
The above is the detailed content of How Can I Append or Prepend a DIV Element Using jQuery?. For more information, please follow other related articles on the PHP Chinese website!