Code has been added to clipboard!

What's jQuery .appendTo() and How It Differs From .append()?

Reading time 1 min
Published Jan 18, 2018
Updated Sep 27, 2019

jQuery appendTo: Main Tips

  • jQuery .appendTo() inserts HTML elements at the end of the selected element. To insert it at the beginning, use .prependTo().
  • This method works in the same way as .append(), but the syntax is different. This might seem insignificant but comes in handy when you use chaining.

Writing and Using .appendTo()

The jQuery .appendTo() method inserts specified elements at the end of the selected element (one or multiple). The elements you define will appear inside the selected element's tag but after all other content.

In the example below, you can see jQuery append to a <h1> element:

Example
$("button").click(() => {
    $("<span>Breaking news!</span>").appendTo("h1");
});

The syntax for jQuery .appendTo() is as follows:

$(content).appendTo(target);

The content defines the content to be added to the target elements.

Note: in this case, target (or selector in other words) precedes the function, differently from .append() .

Latest Coupon Found:

Verified STAFF PICK

TOP-RATED CODING COURSES

Learn the skills of tomorrow

The best time to learn programming is now - follow this link to access 100+ coding courses and enjoy learning at a very low cost!

Expiration date: 18/04/2021
2287 People Used
Only 92 Left
Rating
5.0