Code has been added to clipboard!

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

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

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:

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

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