# Insert an element after other one

Place an element right after a reference element.

Canonical: https://1loc.dev/dom/insert-an-element-after-other-one/
Version: 1.0.0
Runtime: JavaScript · modern browsers (DOM)
Verification: Usage lines executed in headless Chromium against the fixture markup; no external services
Updated: 2026-10-28

## Implementation

```javascript
function insertAfter(element, reference) { reference.after(element); }
```

## Usage

Markup:

```html
<ol id="steps"><li id="one">One</li><li id="three">Three</li></ol>
```

Script:

```javascript
const two = document.createElement('li');
two.textContent = 'Two';
insertAfter(two, document.querySelector('#one'));
[...document.querySelector('#steps').children].map(li => li.textContent); // → ['One', 'Two', 'Three']
```

Lines marked → were executed in headless Chromium against the markup above, and each result was compared with the value shown. Lines marked e.g. are illustrative.

## Limits

- Element.after, before and replaceWith are the modern ChildNode methods; the original used parentNode.insertBefore with nextSibling.
- Inserting a node that is already in the document moves it.

The function does not validate its arguments. Add checks where it receives untrusted input.

## Source and license

Original: https://github.com/phuocng/1loc/blob/14b481cf60dff1620ab1bb99a43b1f68068cdd9b/contents/insert-an-element-after-other-one.mdx
Author: Nguyen Huu Phuoc and original contributors
Contributors: See original repository history
Source commit: 14b481cf60dff1620ab1bb99a43b1f68068cdd9b
Copyright (c) 2020 phuoc-ng
License: MIT — https://1loc.dev/licenses/
Maintainer: Oveyon
Modifications: Uses Element.after. Executed in Chromium. Original MDX retained as inert source evidence.