Nest element as first child

element.prepend(newElement)

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

Syntax

1
element.prepend(newElement: ElementPreset | Component | string): 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:

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

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

Designer Ability