Using jQuery .append() to Insert Content Into an HTML Element

jQuery append: Main Tips

• The .append() jQuery method inserts content at the end of the selected element as its last child. To add it as the first child, use .prepend().
• jQuery append() achieves the same result as .appendTo(), but uses different syntax. This is important when using chained statements.

Using .append()

The jQuery .append() inserts content as the last child of the selected element. It means that the specified content will appear inside the selected element's tag but after all other children.

The example below shows that after a button is clicked, additional text appears, which still belongs to the heading:

$("button").click(() => {
    $("h2").append("<p>Surprise text!</p>");
});

The following syntax makes jQuery append HTML:

$("selector").append(content);

• The selector defines the target element.
• The content specifies the jQuery object, HTML string, DOM element, text node, or an array to add to it. You can add multiple pieces of content as well.

Note: since jQuery 1.4, you can also name a function as the parameter that will return the content to add.