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 additional content via AJAX. In this article, you can familiarise 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 dynamically. You can use this method to append new elements or structures to the end of a given object. The .append() method of jQuery has multiple options and can be used in conjunction with other jQuery functions such as jQuery.removeClass() or jQuery.on(). This opens up numerous options to dynamically extend your DOM tree. Also worth mentioning is the seamless integration of jQuery in WordPress, which allows you to implement special functionalities and interactive elements in your CMS.

What are the syntax and parameters of jQuery.append() method?

JQuery.append() accepts two parameters:

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

• content: Represents 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 interpreted 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 illustrate how to use the .append() method in jQuery.

jQuery.append() HTML

The following example shows how to add HTML structures:

$("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 analogously:

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 properties.

$("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’) simultaneously 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 respective element and the corresponding index to the console.