How to Move Element Into Other Element in jQuery

Sometimes web developers need to move one element on a web page into another element on the same page. You can do this using plain JavaScript or third-party libraries like jQuery. But it is a lot easier to solve this problem using jQuery. It has many useful functions for this purpose and offers a lot of flexibility. In this article, we will learn different ways to move element into other element in jQuery.

How to Move Element Into Other Element in jQuery

First, we will learn the different ways to move element into other element using jQuery. Lastly, we will also learn how to do this using plain JavaScript. Let us say you have two div elements as shown below.

<div id="source">
  ...
</div>

<div id="destination">
  ...
</div>

Let us say you want to move div with ID=source, along with its children elements, to div with ID=destination. There are several ways to do this.

1. Using prependTo()

prependTo() function allows you to insert an element and its children, to the beginning of one or more elements. Here is its syntax.

$(source).prependTo(target)

In the above code, the element selected using the source jquery selector is appended to beginning of the jquery element(s) selected using destination selector. Here is how we can move div with ID=source to the beginning of div with ID=destination.

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

You can also copy & move the same element to multiple other elements. For example, if you have multiple divs as shown below, all with class=destination.

<div id="destination" class="destination">
  
</div>
<div id="destination2" class="destination">
  
</div>

You can use the following code to move the source div to the beginning of each of the destination divs.

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

In the above case, we use ‘.destination’ query selector to select all divs with class=’destination’. In this case, the div with ID=source is cloned and moved to each of the divs with class=destination. However, you will need to update the duplicate ID attribute of elements.

In some jQuery versions, you may need to call detach() function to actually move the element instead of creating a copy and moving the copy. Otherwise, this may create two elements with duplicate IDs.

$('#source').detach().prependTo('#destination');

2. Using prepend()

Please note, jQuery also provides prepend() function which does the same thing as prependTo(). It is common for web developers to get confused between prepend() and prependTo() functions. Here is the syntax of prepend() function.

$(target).prepend($(source))

You will notice that the prepend() function is called on the target element instead of source element. Secondly, you need to pass the source element, instead of the selector of source element. Here is an example to move div with ID=source to div with ID=destination.

$('#destination').prepend($('#source'))

By changing the jQuery selector of target element, you can prepend source element to multiple elements. Here is an example to clone and prepend source element to all divs with class=destination.

$('.destination').prepend($('#source'))

Here too, you will need to update the duplicate ID attribute of source element after they are cloned and moved.

3. Using appendTo()

Similar to prependTo(), appendTo() will append the source element to the end of target element. Here is its syntax.

$(source).appendTo(target)

In the above code, the element selected using jQuery selector source is appended to the element(s) selected using target jQuery selector. Here is the code to append the div with ID=source to div with ID=destination.

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

Here also, you can appendTo() function to append an element and its children to multiple elements. Let us say you have the following multiple divs with class=target.

<div id="destination" class="target">
  
</div>
<div id="destination2" class="target">
  
</div>

Here is an example to clone and append the div with ID=source to all divs with class=’target’.

$('#source').appendTo('.target');

In the above code, we use ‘.target’ jQuery selector to select all div with class=target.

In some jQuery versions, you may need to call detach() function on the source element to actually move the node, instead of creating a copy and moving the copy, and avoid creating multiple elements with duplicate IDs.

$('#source').detach().appendTo('#destination');

4. Using append()

Like prepend(), you can also use append() function to insert an element at the end of another element. Here is its syntax.

$(target).append($(source))

Here is an example to append div with ID=source to div with ID=target.

$('#destination').append($('#source'));

appendTo() function is called on source element whereas append() function is called on target element. Secondly, in appendTo() we only pass selector to the source element whereas in append() we pass the source element itself, instead of its selector.

By changing the jQuery selector of target element, you can append the same source element to multiple elements. Here is an example to clone and append source element to all div with class=destination.

$('.destination').append($('#source'));

5. Using insertBefore()

Sometimes, you may need to move the element before another element, not inside another element. In such cases, you can use insertBefore() function. Here is its syntax.

$(source).insertBefore(target)

This function is called on the source element and takes an argument as the jQuery selector to target element. Here is an example to move div with ID=source to div with ID=destination.

$('#source').insertBefore('#destination')

If you have multiple divs with class=destination and you want to move the div with ID=source before each of these elements, you can do this by changing the jQuery selector to select the target div based on class attribute.

$('#source').insertBefore('.destination')

In the above case, be careful that the ID attribute of source element will be duplicated so you will need to update it.

This command is useful if you want to move an element before instead of inside another element.

6. Using insertAfter()

Similarly, if you want to move an element after another element instead of inside it, then you can do this using insertAfter() function. Here is its syntax.

$(source).insertAfter(target)

You call the insertAfter() function on source element and pass the argument as jQuery selector of target element.

$('#source').insertAfter('#destination')

In case you want to clone and move the element after multiple elements, pick a jQuery selector that selects multiple target elements. Here is an example to clone and move source element after all divs with class=’destination’.

$('#source').insertAfter('.destination')

Here also the source element will be cloned and moved after the target elements. So you will need to de-duplicate its ID attributes, after the move.

7. Using html()

If you have the HTML code for an element or you want to put it into another element that is empty, then you can use html() function. Here is its syntax.

$(target).html(html_code);

If there is any HTML in your destination element, then its content will be overwritten completely with this new HTML. Here is an example to add HTML for div with ID=source

$('#destination').html('<div id="source">...</div>')

9. Using JavaScript

For those who do not have jQuery on their website, or do not want to use jQuery, you can always use plain JavaScript for this purpose. In this case, we first create a document fragment.

var fragment = document.createDocumentFragment();

Next, we append the source element to this fragment.

fragment.appendChild(document.getElementById('source'));

In the above code, we call getElementByID() function on div with ID=source to get an object. Then we call appendChild() function to append the element to the fragment.

Lastly, we append the element to the target element.

document.getElementById('destination').appendChild(fragment);

In the above code, we call getElementByID() on element with ID=destination. On this, we call appendChild() function.

Conclusion

In this article, we have learnt many different ways to move element into another element using jQuery. If you want to move an element to the beginning of another element, you can use prependTo() or prepend() functions. If you want to move it to the end of another element, you can use appendTo() or append() functions. If you want to add the element before another element, use insertBefore() function. If you want to add the element after another element, use insertAfter() function. We have also learnt how to solve this problem using plain JavaScript also. You can use any of these methods as per your requirement. The key point is to use the right jQuery selectors for source and destination elements, and use the appropriate function.

FAQ

1. When to use appendTo() or append() functions?

appendTo() and append() functions can be used when you need to move an element to the beginning of another element.

2. When to use prependTo() or prepend() functions?

prependTo() and prepend() functions can be used when you need to move an element to the end of another element.

3. When to use html() function?

You can use html() function when you want to not only move an element into another but also completely overwrite the content of destination element.

Also read:

How to Get Selected Text from Dropdown List
How to Store Objects in HTML5 Local Storage/Session Storage
How to Remove Duplicate Values from JS Array