jQuery appendTo()

The jQuery appendTo() method is used to insert content at the end of the selected elements, same as that of jQuery append() method. The only difference is in the syntax and placement of the content and target in these two methods.

In append() method, the selected element is treated as a target and the content to be inserted is treated as an argument of the append() method.

Syntax:

$(selector).append(content)  

In appendTo() method, the content to be inserted is the selected element and target is treated as an argument of the appendTo() method.

Syntax:

$(content).appendTo(selector) 

Content:

  • Content is a compulsory parameter of jQuery appendTo() method, as it specifies the content to insert at the end of the selected element.
  • Its can accept following values: HTML elements, jQuery objects and DOM elements.

Selector:

  • It is also a mandatory parameter, as it specifies the place where the content need to be inserted.

 

Example

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
$("button").click(function(){  
$("<span>How are you?</span>").appendTo("p");   
});  
});  
</script>  
</head>  
<body>  
<button>Click me</button>  
<p>Hello! </p>  
</body>  
</html>

Try it

JS Bin on jsbin.com

Please Share