How to insert elements into DOM tree with jQuery.append()

The jQuery.append() method can be used to simplify complex tasks such as creating dynamic lists, adding form elements or loading ad­di­tion­al content via AJAX. In this article, you can fa­mil­iar­ize yourself with the syntax of the method and how to use it.

What is the jQuery.append() method?

jQuery.append() is a function from the jQuery library that adds content to the DOM (Document Object Model) tree dy­nam­i­cal­ly. You can use this method to append new elements or struc­tures to the end of a given object. The .append() method of jQuery has multiple options and can be used in con­junc­tion with other jQuery functions such as jQuery.re­move­Class() or jQuery.on(). This opens up numerous options to dy­nam­i­cal­ly extend your DOM tree. Also worth men­tion­ing is the seamless in­te­gra­tion of jQuery in WordPress, which allows you to implement special func­tion­al­i­ties and in­ter­ac­tive elements in your CMS.

What are the syntax and pa­ra­me­ters of jQuery.append() method?

JQuery.append() accepts two pa­ra­me­ters:

$(selector).append(content, function(index, html));

• content: Rep­re­sents the content to be added
• function(index, html)**: Called after appending the content
• index: The index of the current element in the set of selected objects
• html: The current HTML content of the element

The selector can be any valid CSS selector to identify the desired target element. Selectors in jQuery are, for example, IDs (#id), classes (.class), or element names (e.g., div).

The content can be a string (text), HTML code or an already existing DOM element. If you pass a string, it will be added as the text content of the element. If you use HTML code, it will be in­ter­pret­ed and inserted as a new element structure. If there is an existing DOM element, .append() appends it to the target object.

Examples of how to use jQuery.append()

Below we’ll show you some examples to il­lus­trate how to use the .append() method in jQuery.

jQuery.append() HTML

The following example shows how to add HTML struc­tures:

$("header").append("<div><p>New content</p></div>");

jQuery.append() div inserts a container with a paragraph at the end of the header element.

jQuery.append() DOM elements

Appending DOM elements is done anal­o­gous­ly:

var newElement = $("<div><p>New Content</p></div>");
$("header").append(newElement);

jQuery.append() with callback function

A callback function lets you perform certain actions after adding the content. It can also be used to access a newly created element or its prop­er­ties.

$("div#container").append("<p>First element</p><p>Second element</p><p>Third element</p>", function(index, html) {
    console.log("Added element: " + html);
    console.log("Index of the element: " + index);
});

The output reads:

Added element: <p>First element</p>
Index of the element: 0
Added element: <p>Second element</p>
Element index: 1
Added element: <p>Third element</p>.
Element index: 2

In this example, jQuery.append() element appends three <p> tags (“First element”, “Second element” and “Third element”) si­mul­ta­ne­ous­ly to the end of div with the ID container. The callback function is called for each added object and outputs the HTML content of the re­spec­tive element and the cor­re­spond­ing index to the console.