.appendTo() method in Jquery

Description:

The Jquery appendTo() method is used to add additional content at the end of the selected elements. It is same like as append() method, it will add content at the end of the selected elements. The main difference is their syntax-specifically, in the placement of the target and content location.

Syntax

$(content).appendTo(selector)

Example:

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <style>
 .container {
 border: 5px solid #1a80b6;
 padding: 10px;
 display: inline-block;
 }
 </style>
 <script type="text/javascript">
 $(document).ready(function () {
 $('.btnClass').click(function () {
 $('<div style="color:#ff0000"> This is Newly added text <div/>').appendTo("#divcontainer");
 })
 });
 </script>
</head>
<body>
 <button class="btnClass" id="addMethod">Append New Text</button><br /><br />
 <div id="divcontainer" class="container">
 <div>
 This is Default text
 </div>
 </div>
</body>
</html>

<html>

<head>

<style>

.container {

border: 5px solid #1a80b6;

padding: 10px;

display: inline-block;

}

</style>

$(document).ready(function () {

$('.btnClass').click(function () {

$('<div style="color:#ff0000"> This is Newly added text <div/>').appendTo("#divcontainer");

})

});

</script>

</head>

<body>

<button class="btnClass" id="addMethod">Append New Text</button><br /><br />

<div>

This is Default text

</div>

</body>

</html>

.appendTo() method in Jquery