jQuery | Move an element into another element
Last Updated :
28 Mar, 2019
There are two methods to move an element inside another element are listed below:
Method 1: Using append() method: This append() Method in jQuery is used to insert some content at the end of the selected elements.
Syntax:
$(selector).append( content, function(index, html) )
Parameters: This method accepts two parameters as mentioned above and described below:
- content: It is required parameter and used to specify the content which is to be inserted at the end of selected elements. The possible value of contents are HTML elements, jQuery objects and DOM elements.
- function(index, html): It is optional parameter and used to specify the function that will return the content to be inserted.
- index: It is used to return the index position of the element.
- html: It is used to return the current HTML of the selected element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript
</title>
<script src=
</script>
<style>
#parent {
height: 100px;
width: 300px;
background: green;
margin: 0 auto;
}
#child {
height: 40px;
width: 100px;
margin: 0 auto;
color: yellow
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<div id= "parent"></div>
<br>
<h4 id= "child">
A Computer Science Portal for geeks
</h4>
<br>
<button onclick="myGeeks()">
move
</button>
<script>
function myGeeks() {
$("#parent").append($("#child"));
}
</script>
</body>
</html>
|
Output:
- Before clicking the button:
- After clicking the button:
Method 2: Using prepend() Method: The prepend() method is an inbuilt method in jQuery which is used to insert a specified content at the beginning of the selected element.
Syntax:
$(selector).prepend(content, function)
Parameters: This method accept two parameters as mentioned above and described below:
- content: It is required parameter which is used to specify the content need to be inserted.
- function: It is optional parameter which is used to specify the function to perform after call.
Example:
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript
</title>
<script src=
</script>
<style>
#parent {
height: 100px;
width: 300px;
background: green;
margin: 0 auto;
}
#child {
height: 40px;
width: 100px;
margin: 0 auto;
color: yellow
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<div id= "parent"></div>
<br>
<h4 id= "child">
A Computer Science Portal for geeks
</h4>
<br>
<button onclick="myGeeks()">
move
</button>
<script>
function myGeeks() {
$("#parent").prepend($("#child"));
}
</script>
</body>
</html>
|
Output:
- Before clicking the button:
-
After clicking the button:
Share your thoughts in the comments
Please Login to comment...