jQuery appendTo() Method
Last Updated :
27 Oct, 2022
Improve
The appendTo() method is an inbuilt method in jQuery that is used to insert HTML element at the end of the selected element.
Syntax:
$(content).appendTo(selector)
Here the element content specifies the content to be inserted.
Parameters: It accepts a parameters "selector" that specifies the elements to which content will be appended.
Return Value: It returns the modified selected element.
Example 1: In this example, id content with the element "span" will be appended to the id "#hel" element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src=
"https://code.jquery.com/jquery-1.10.2.js">
</script>
<style>
#hel {
background: lightgreen;
display: block;
border: 2px solid green;
padding: 10px;
width: 300px;
}
</style>
</head>
<body>
<span>geeks Writer !!!</span>
<div id="hel">Hello- </div>
<script>
$("span").appendTo("#hel");
</script>
</body>
</html>
Output:
Example 2: In the below example, we are directly appending a "p" element using this method.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src=
"https://code.jquery.com/jquery-1.10.2.js">
</script>
<style>
body {
display: block;
width: 250px;
height: 100px;
border: 2px solid green;
padding: 10px;
}
</style>
</head>
<body>
<h2>Greetings from gfg !</h2>
<div class="container">
<div class="inner">
Hello
</div>
</div>
<script>
$("<p>Everyone !!!</p>").appendTo(".inner");
</script>
</body>
</html>
Output:
