> This page is for Designer API.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Insert element after target element

> Insert an element onto the page after the target element.

## `element.after(newElement, settings?)`

Insert an element onto the page after the target element.

### Syntax

```typescript
element.after(newElement: ElementPreset | Component | string, settings?: SetSettingsInput): Promise<AnyElement>
```

### Parameters

* **newElement**:  *webflow\.elementPresets.\<preset> | Component | string* - The new element to be inserted into the hierarchy:

  * An element preset from the `webflow.elementPresets` object, which contains all Webflow elements that can be inserted onto the canvas
  * A component object
  * A string value representing the element to create, such as `img`, `h2`, or `section`

If you pass a string value, the API converts it to an element preset.
This table maps these values to element presets:

| Tag name     | Element preset |
| ------------ | -------------- |
| `div`        | Box            |
| `header`     | Box            |
| `footer`     | Box            |
| `nav`        | Box            |
| `main`       | Box            |
| `section`    | Box            |
| `article`    | Box            |
| `aside`      | Box            |
| `address`    | Box            |
| `figure`     | Box            |
| `img`        | Image          |
| `a`          | LinkBlock      |
| `ul`         | List           |
| `ol`         | ListItem       |
| `li`         | ListItem       |
| `blockquote` | Blockquote     |
| `h1` – `h6`  | Heading        |
| `p`          | Paragraph      |
| `form`       | FormForm       |
| `input`      | FormTextInput  |
| `textarea`   | FormTextarea   |
| `select`     | FormSelect     |
| `label`      | FormBlockLabel |
| `button`     | FormButton     |
| All others   | DOM            |

* **settings** (optional): *SetSettingsInput* — Initial settings to apply to the new element at creation time, using the same keys and value types as [`element.setSettings()`](/designer/reference/element-settings/setSettings).
  Pass an object with one or more setting keys and their values.
  If you omit this parameter, the element uses its default settings.

Settings are pre-validated against the target element type before the element is created.
If a setting key is not applicable to the target element type (for example, passing `assetId` on a `div`), the element is not created and an error is thrown.
Component instances do not accept settings at insertion time; use [`setProps()`](/designer/reference/component-element/setProps) after creation instead.

### Returns

**Promise\<*AnyElement*>**

A Promise that resolves to an `AnyElement` object.

`AnyElement` represents the various element types available in a Webflow project.
See a full list of supported element types in the [Designer Extension type definitions.](https://www.npmjs.com/package/@webflow/designer-extension-typings?activeTab=code)

### Example

Insert an element without providing settings:

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

if (selectedElement) {
  // Insert elements after the selected element
  const newDiv = await selectedElement.after(webflow.elementPresets.DivBlock)
  const newP = await selectedElement.after('p')

  // Print element details
  console.log(JSON.stringify(newDiv))
}
```

Insert an element with settings:

```typescript
// Get Selected Element
const selectedElement = await webflow.getSelectedElement()

if (selectedElement) {
  // Insert an image after the selected element with initial settings
  const newImg = await selectedElement.after(webflow.elementPresets.Image, {
    assetId: 'xxxx',
    altText: 'A sunset photo',
  })

  // Insert an element using a string tag, with a custom DOM ID
  const newSection = await selectedElement.after('section', { domId: 'my-section' })

  console.log(JSON.stringify(newImg))
}
```

[Try this example](https://webflow.com/oauth/authorize?response_type=code\&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62)

### Designer Ability

| Designer Ability | Locale  | Branch | Workflow | Sitemode |
| :--------------- | :------ | :----- | :------- | :------- |
| **canDesign**    | Primary | Main   | Canvas   | Design   |