Updated April 20, 2023
Definition of jQuery move element
The jQuery move element performs to move element around the DOM tree of the document. The jQuery move element is not a method but to perform it jQuery provides adding methods which are append() method appendTo() method and prepend() method, these methods are built-in method in jQuery. Sometimes we might need to move one element inside another element like we have to move a paragraph inside one div element, so we can use append(), appendTo() or prepend() methods based on the requirement to perform.
Syntax of the jQuery append() Method:
The jQuery append() method is used to append the content at the selected element.
$(selector).append(content, function(index, html));Parameters:
- selector – This is not optional, that specifies the element after whose element the specified content is to be added.
- content – This is not an optional parameter, that specifies the content which is to be placed at end of the selected selector. The possible value of this parameter is DOM elements, HTML elements, and jQuery objects.
- function – This is an optional parameter, that specifies the name of the function which is to be run to get the content to be appended.
- index – This is an optional parameter, that specifies an index position of the element.
- HTML – This is an optional parameter, that specifies the current HTML of a selected element.
Syntax of the jQuery appendTo() Method:
The jQuery appendTo() method is used to insert the content at the end of the selected element. It performs the same as the append() method only they are different in their syntax, the selector and content position is reverse compare to append() method.
$(content).append( selector );Parameters:
- content – This is not optional, which specifies the content which is to be placed at end of the selected selector.
- selector – This is not an optional parameter, that specifies the element after whose the content will be added.
Syntax of the jQuery prepend() Method:
The jQuery append() method is used to insert the content at the beginning of a selected element.
$( selector ).prepend( content, function );Parameters:
- selector – This is not optional, that specifies the element beginning of whose the specified content is to be added.
- content – This is not an optional parameter, that specifies the content which is to be placed at beginning of the selected selector. The possible value of this parameter is DOM elements, HTML elements, and jQuery objects.
- function – This is an optional parameter, that specifies the name of the function which is to be run.
Working of the jQuery move element methods
The append(), appendTo() or prepend() methods apply to the selector, so when we call these methods to add the selected element into another element, the jQuery itself understand that the element which is to be added is already present in the document and then move an element to the parent element.
Examples
Next, we write the html code to understand the jQuery append() method more clearly with the following example, where the append() method is used to append p element to div element, as below –
Example #1
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery move element </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<script>
function move()
{
$("div").append($("p"));
}
</script>
</head>
<body>
<h2> Example for the jQuery move elements </h2>
<div style = "color:green; border:10px solid red; padding:10px; font-size:30px" > This is parent <div> element. </div>
<p style="color:green;"> This is child <p> element. </p>
<button onclick="move()">click to move p element to div element.</button>
</body>
</html>Output:
Once we click on the “click to move p element to div element.” Button, output is –
As in the above program, the div and p element contains some content, and also there is a button that call the move() function when we click it. So when we click the button, it runs the move() function where the append() function is used to append p element to div element that’s the way the p content is moved inside the box, as in the second output.
Example of jQuery appendTo() method to append element –
Next, we write the HTML code to understand the jQuery appendTo(), where the appendTo() method is used to append p element to li elements, as below –
Example #2
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery move element </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<script>
function move()
{
$("#id1").appendTo($("li"));
}
</script>
</head>
<body>
<h2> Example for the jQuery move elements </h2>
<h2 style = "color:red;" > Fruits : </h2>
<ol style = "color:red;" >
<li id = "id2"> Apple </li>
<li id = "id3"> Mango </li>
<li> Graps </li>
<li id = "id4"> Cherry </li>
</ol>
<p id="id1" style="color:green;"> Available </p>
<button onclick="move()">click to append list.</button>
</body>
</html>Output:
Once we click on the “click to append list.” button, the output is –
As in the above program, the li and p elements contain some content, and also there is a button that calls the move() function. So when we click the button, it runs the move() function and runs the appendTo() function which appends p element to all li elements that’s why the p content is moved next to all list of elements, as in the second output.
Example of jQuery prepend() method to prepend element –
Next, we write the HTML code to understand the jQuery prepend(), where the prepend() method is used to prefix li elements top element, as below –
Example #3
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery move element </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<script>
function move()
{
$("#id1").prepend($("li"));
}
</script>
</head>
<body>
<h2> Example for the jQuery move elements </h2>
<button onclick="move()">Click to prepend list to Available(p element).</button>
<h2 style = "color:red;" > Fruits : </h2>
<ol style = "color:red;" >
<li id = "id2"> Apple </li>
<li id = "id3"> Mango </li>
<li> Graps </li>
<li id = "id4"> Cherry </li>
</ol>
<p id="id1" style="color:green;"> Available </p>
</body>
</html>Output:
Once we click on the “Click to prepend list to Available(p element).” button, the output is –
As in the above program, all the li elements are prepended to the p element content that is “Available” when we click the button which runs the move() function and run the prepend() function, as in the second output.
Conclusion
To perform the jQuery move elements, we can use append(), appendTo() or prepend() method which are built-in methods in jQuery.
Recommended Articles
This is a guide to jQuery move element. Here we discuss the Description, syntax, Working of the jQuery move element methods, and Example with code implementation. You may also have a look at the following articles to learn more –
