# How to insert an element after another element in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Sep 30, 2020, updated Sep 23, 2021. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-dom-append-to-an-element

> Learn how to append an element to another HTML element by using the appendChild() method in JavaScript.

To append an HTML element to another element, you can use the `appendChild()` method of the target element object.

The `appendChild()` method appends a node as the last child of an existing node.

```javascript
target.appendChild(elem);
```

Let us say that you have the following list element:

```javascript
<ul id="drinks">
    <li>Coffee</li>
    <li>Water</li>
</ul>
```

Now you want to append another element at the end of the list. You can use the following code:

```javascript
const drinks = document.querySelector('#drinks');

// Create a <li> element
const elem = document.createElement("li");

// Create a new text node
const text = document.createTextNode("Tea");

// Append text node to <li> node
elem.appendChild(text);

// Finally, append <li> to <ul> node
drinks.appendChild(elem);
```

Take a look at [this article](https://attacomsian.com/blog/javascript-insert-element) to learn more about inserting elements into the DOM in JavaScript.