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

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:

$("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() .