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

1
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:

• settings (optional): SetSettingsInput — Initial settings to apply to the new element at creation time, using the same keys and value types as element.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() 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.

Example

Insert an element without providing settings:

1
// Get Selected Element
2
const el = await webflow.getSelectedElement();
3
4
// Check if element supports child elements
5
if (el?.children) {
6
7
  // Prepend elements as children of the selected element
8
  const newDiv = await el.prepend(webflow.elementPresets.DivBlock)
9
  const newP = await el.prepend('p')
10
11
  // Print element details
12
  console.log(JSON.stringify(newDiv))
13
14
}

Insert an element with settings:

1
// Get Selected Element
2
const el = await webflow.getSelectedElement();
3
4
// Check if element supports child elements
5
if (el?.children) {
6
7
  // Prepend an image element with initial settings applied at creation time
8
  const newImg = await el.prepend(webflow.elementPresets.Image, {
9
    assetId: 'xxxx',
10
    altText: 'A sunset photo',
11
  })
12
13
  // Prepend an element using a string tag, with a custom DOM ID
14
  const newSection = await el.prepend('section', { domId: 'my-section' })
15
16
  console.log(JSON.stringify(newImg))
17
18
}

Designer Ability