Home »
jQuery »
jQuery Examples
How to move an element into another element?
In this tutorial, let's discuss how to move an element into another element using jQuery?
Submitted by Pratishtha Saxena, on June 17, 2022
Firstly, jQuery is a JavaScript library used to simplify HTML DOM tree traversal and manipulation, and event handling. It is free, open-source software. It is easy to use and understand.
Now, to move an element completely into another DOM element, the following methods can be used.
- appendTo()
- append()
- prepend()
- prependTo()
Note: Always remember to apply the CDN link while working with jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Let's discuss each and every method in a brief which will give you better understanding and how they are different from each other.
1) Using appendTo() Method
jQuery appendTo() method moves one DOM element into another. It inserts the element to be moved to the target location, hence, removing it from its previous location completely.
Syntax:
$(content).appendTo(selector)
Where the content (element 1) is the text or the DOM element that has to be inserted to the selector (element 2). The content here works as the submit element and the selector is the container to be submitted
Example 1:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#ParentDiv
{
height: 100px;
width: 500px;
margin: 10px;
background: seagreen;
}
#ChildDiv
{
height: 50px;
width: 400px;
margin: 10px;
background: skyblue;
}
</style>
</head>
<body>
<center>
<form id="form1">
<div id="ParentDiv">
<center>Parent Div Content is Here.</center>
</div>
<div id="ChildDiv">
<center>Child Div Content is Here.</center>
</div>
</form>
</center>
</body>
</html>
jQuery Function:
<script>
$(document).ready(function(){
$("#ChildDiv").appendTo("#ParentDiv");
})
</script>
Output:
2) Using append() Method
jQuery append() method is similar to appendTo() but there is a little bit difference in the syntax. Here, the position of the selector and content gets interchanged.
Syntax:
$(selector).append(content)
The selector here is the container to which we want to add or append the content, i.e., submit element.
Example 2:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#ParentDiv
{
height: 100px;
width: 500px;
margin: 10px;
background: seagreen;
}
#ChildDiv
{
height: 50px;
width: 400px;
margin: 10px;
background: skyblue;
}
</style>
</head>
<body>
<center>
<form id="form1">
<div id="ParentDiv">
<center>Parent Div Content is Here.</center>
</div>
<div id="ChildDiv">
<center>Child Div Content is Here.</center>
</div>
</form>
</center>
</body>
</html>
jQuery Function:
<script>
$(document).ready(function(){
$("#ParentDiv").append($("#ChildDiv"));
})
</script>
Output:
3) Using prependTo() Method
jQuery prependTo() method similarly moves one DOM element into another. Prepend means to insert the specified content before the first child of the target.
Syntax:
$(content).prependTo(selector)
Where the content (submit) is the DOM element that has to be inserted to the selector (container).
It differs from the appendTo() as appendTo() inserts the container at the end of the target element whereas prependTo() inserts at the beginning.
Example 3:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#ParentDiv
{
height: 100px;
width: 500px;
margin: 10px;
background: seagreen;
}
#ChildDiv
{
height: 50px;
width: 400px;
margin: 10px;
background: skyblue;
}
</style>
</head>
<body>
<center>
<form id="form1">
<div id="ParentDiv">
<center>Parent Div Content is Here.</center>
</div>
<div id="ChildDiv">
<center>Child Div Content is Here.</center>
</div>
</form>
</center>
</body>
</html>
jQuery Function:
<script>
$(document).ready(function(){
$("#ChildDiv").prependTo("#ParentDiv");
})
</script>
Output:
4) Using prepend() Method
jQuery prepend() method is similar to prependTo() as it also inserts the targeted element at the beginning to the container. But it is similar to append() in the form of syntax. The container, i.e., where the element has to be moved is written first and then the submitted element is written.
Syntax:
$(selector).prepend(content)
The selector here is the container to which we want to add or append the content, i.e., submit element.
Example 4:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#ParentDiv
{
height: 100px;
width: 500px;
margin: 10px;
background: seagreen;
}
#ChildDiv
{
height: 50px;
width: 400px;
margin: 10px;
background: skyblue;
}
</style>
</head>
<body>
<center>
<form id="form1">
<div id="ParentDiv">
<center>Parent Div Content is Here.</center>
</div>
<div id="ChildDiv">
<center>Child Div Content is Here.</center>
</div>
</form>
</center>
</body>
</html>
jQuery Function:
<script>
$(document).ready(function(){
$("#ParentDiv").prepend($("#ChildDiv"));
})
</script>
Output:
