# 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)](https://www.ionos.co.uk/digitalguide/websites/web-development/an-introduction-to-the-document-object-model-dom/) 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()](https://www.ionos.co.uk/digitalguide/websites/web-development/jquery-removeclass/) or [jQuery.on()](https://www.ionos.co.uk/digitalguide/websites/web-development/jquery-on/). This opens up numerous options to dynamically extend your DOM tree. Also worth mentioning is the seamless integration of [jQuery in WordPress](https://www.ionos.co.uk/digitalguide/hosting/blogs/wordpress-jquery/), which allows you to implement special functionalities and interactive elements in your CMS.

Tip Planning on building a website? IONOS offers you the ideal solution with generous [webspace](https://www.ionos.co.uk/hosting/webspace "Webspace from IONOS"), cost-effective rates and a variety of features to meet your individual needs. Start now and get your website onto the internet.

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

JQuery.append() accepts **two parameters**:

```jQuery
$(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.

Tip Unlock the full potential of your IONOS services using the [IONOS API](https://developer.hosting.ionos.co.uk "IONOS Developer API"). You can leverage your resources efficiently with easy integration, scalability and automation possibilities. Discover the diverse benefits and maximise your online potential with the IONOS API.

## Examples of how to use jQuery.append()

Below we’ll show you some examples to illustrate how to use the .append() method in jQuery.

Tip To deepen your **knowledge of jQuery**, we recommend our [jQuery tutorial](https://www.ionos.co.uk/digitalguide/websites/web-development/jquery-tutorial-introduction-and-first-steps/). Here you can find comprehensive information and practical instructions to develop your jQuery skills and create appealing websites.

### jQuery.append() HTML

The following example shows how to add **HTML structures**:

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

```jQuery
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.

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

```jQuery
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**.

Tip Streamline the deployment of your web application with [Deploy Now](https://www.ionos.co.uk/hosting/deploy-now "Deploy Now from IONOS") from IONOS. This powerful tool automates the setup of all necessary resources such as server instances, databases and domains. This saves valuable time, so that you can invest in actual development instead.


This is a markdown version of: [https://www.ionos.co.uk/digitalguide/websites/web-development/jquery-append/](https://www.ionos.co.uk/digitalguide/websites/web-development/jquery-append/) for AI/LLM consumption.