BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

jQuery appendTo() Method

By Chaitanya Singh | Filed Under: jQuery

The jQuery appendTo() method inserts the specified html elements at the end of the selected elements.

Syntax of jQuery appendTo() Method

$(content).appendTo(selector)

content: This is the mandatory parameter. This contains HTML elements that are inserted at the end of selected elements by appendTo() method. This content must always have html tags.

Important Note: If content field contains already existing html elements then those elements will be moved from the current position to the end of the selected elements.

selector: This is also a mandatory parameter. This selects the elements after which the specified content is inserted.

jQuery appendTo() method Example

In the following example, we have a H1 heading as an html element and two paragraphs. We are appending the H1 tag at the end of each paragraph using appendTo() method. Since H1 is already present in the html page, it will be moved from its current position and appended at the end of each p element as shown in the output screenshot.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1").appendTo("p");
  });
});
</script>
</head>
<body>

<h1>jQuery appendTo() Example</h1>

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

<button>Move and append H1 heading at the end of paragraphs</button>

</body>
</html>

Output:
Before button click:
jQuery appendTo() Method
After button click:
jQuery appendTo() Method

❮ jQuery append()jQuery clone() ❯

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2022 BeginnersBook . Privacy Policy . Sitemap