Insert element before target element

element.before(newElement, settings?)

Insert an element onto the page before the target element.

Syntax

1
element.before(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 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() 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.

Example

Insert an element without providing settings:

1
// Get Selected Element
2
const selectedElement = await webflow.getSelectedElement()
3
4
if (selectedElement) {
5
  // Insert elements before the selected element
6
  const newDiv = await selectedElement.before(webflow.elementPresets.DivBlock)
7
  const newP = await selectedElement.before('p')
8
9
  // Print element details
10
  console.log(JSON.stringify(newDiv))
11
}

Insert an element with settings:

1
// Get Selected Element
2
const selectedElement = await webflow.getSelectedElement()
3
4
if (selectedElement) {
5
  // Insert a heading before the selected element with initial settings
6
  const newHeading = await selectedElement.before(webflow.elementPresets.Heading, {
7
    tag: 'h2',
8
    domId: 'section-title',
9
  })
10
11
  // Insert an image before the selected element using a string tag, with settings
12
  const newImg = await selectedElement.before('img', {
13
    assetId: 'xxxx',
14
    altText: 'A sunset photo',
15
  })
16
17
  console.log(JSON.stringify(newHeading))
18
}

Designer Ability