How To Move An Element Into Another Element Using Jquery

For More Videos Visit Our YouTube Channel

Move An Element Into Another Element

Here we consider how to Move An Element Into Another Element. We can do this using Jquery. In Jquery, we will be using Jquery AppendTo and PrependTo for this purpose. Lets start with one example here.


Move An Element Into Another Element Using Jquery AppendTo

appendTo adds the new element to the end of the destination element. Suppose we have a div with ID ParentDiv. And we have another separate Div with ID ChildDiv.



We wants to place the ChildDiv inside ParentDiv. This can be done by using Jquery AppendTo as follows.

$(function () {
         $('#btnSubmit').click(function () {
                  $("#ChildDiv").appendTo("#ParentDiv");
         })
})




Move An Element Into Another Element Using Jquery PrependTo

prependTo adds the new element to the beginning of the destination element. The above case can be done using Jquery PrependTo as follows.

$(function () {
         $('#btnSubmit').click(function () {
                  $("#ChildDiv").prependTo("#ParentDiv");
         })
})