Correctly handling an element’s child elements is crucial for keeping the element hierarchy organized. These Element methods let you retrieve and insert child elements, offering programmatic ways to change page structure.

To effectively use these methods, check if an element has its Children property set to true. This property is read-only, so it’s important to use elements that have this attribute. Using these methods with elements that don’t have this property will return an error.

Methods

element.getChildren()

Get child elements from a parent element in the element hierarchy.

Syntax

1
element.getChildren(): Promise<Array<AnyElement>>

Returns

Promise<Array<AnyElement>>

A Promise that resolves to an array of AnyElement objects.

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 selectedElement = await webflow.getSelectedElement();
3
4
if (selectedElement?.children) {
5
  
6
  // Get Children
7
  const children = await selectedElement.getChildren();
8
9
  // Get Children Details
10
  const childrenDetailsPromises = children.map(async (child) => {
11
12
13
    // Get style details of children (This is the name of the element in the Designer)
14
    let styleDetails = null;
15
    let childStyles = child.styles ? await child.getStyles() : null;
16
17
    if (childStyles) {
18
      const styleNamesPromises = childStyles.map(style => style.getName());
19
      styleDetails = await Promise.all(styleNamesPromises);
20
    }
21
22
    return {
23
      styleDetails,
24
    };
25
  });
26
27
  // Print details of child elements
28
  const childrenDetails = await Promise.all(childrenDetailsPromises);
29
  console.log(childrenDetails); // This will now log the array of child details
30
}

Designer Ability

Checks for authorization only

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): Promise<AnyElement>

Parameters

• newElement: webflow.elementPresets.<preset> - The new element to be inserted into the hierarchy. This element is derived from the webflow.elementPresets object, which contains all Webflow elements that can be inserted onto the canvas.

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 newElement as a child to of the selected element
9
  const newElement = await el?.prepend(webflow.elementPresets.DivBlock)
10
11
  // Print element Details
12
  console.log(JSON.stringify(newElement))
13
14
}

Designer Ability

element.append(newElement)

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

Syntax

1
element.append(newElement: ElementPreset | Component): Promise<AnyElement>

Parameters

• newElement: webflow.elementPresets.<preset> - The new element to be inserted into the hierarchy. This element is derived from the webflow.elementPresets object, which contains all Webflow elements that can be inserted onto the canvas.

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
// Check if element supports child elements
5
if (el?.children) {
6
7
  // Append newElement as a child to of the selected element
8
  const newElement = await el?.append(webflow.elementPresets.DivBlock)
9
10
  // Print element Details
11
  console.log(JSON.stringify(newElement))
12
13
}

Designer Ability