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

# Nest element as first child

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

Insert a new element onto the page as the first child of the target element.

### Syntax

```typescript
element.prepend(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`        | DivBlock       |
| `header`     | DivBlock       |
| `footer`     | DivBlock       |
| `nav`        | DivBlock       |
| `main`       | DivBlock       |
| `section`    | DivBlock       |
| `article`    | DivBlock       |
| `aside`      | DivBlock       |
| `address`    | DivBlock       |
| `figure`     | DivBlock       |
| `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 omitted, element settings use their defaults.

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 our [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 el = await webflow.getSelectedElement();

// Check if element supports child elements
if (el?.children) {

  // Prepend elements as children of the selected element
  const newDiv = await el.prepend(webflow.elementPresets.DivBlock)
  const newP = await el.prepend('p')

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

}
```

Insert an element with settings:

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

// Check if element supports child elements
if (el?.children) {

  // Prepend an image element with initial settings applied at creation time
  const newImg = await el.prepend(webflow.elementPresets.Image, {
    assetId: 'xxxx',
    altText: 'A sunset photo',
  })

  // Prepend an element using a string tag, with a custom DOM ID
  const newSection = await el.prepend('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   |