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

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

// Get Selected Element
const selectedElement = await webflow.getSelectedElement();

if (selectedElement?.children) {
  
  // Get Children
  const children = await selectedElement.getChildren();

  // Get Children Details
  const childrenDetailsPromises = children.map(async (child) => {


    // Get style details of children (This is the name of the element in the Designer)
    let styleDetails = null;
    let childStyles = child.styles ? await child.getStyles() : null;

    if (childStyles) {
      const styleNamesPromises = childStyles.map(style => style.getName());
      styleDetails = await Promise.all(styleNamesPromises);
    }

    return {
      styleDetails,
    };
  });

  // Print details of child elements
  const childrenDetails = await Promise.all(childrenDetailsPromises);
  console.log(childrenDetails); // This will now log the array of child details
}

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

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

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


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

  // Prepend newElement as a child to of the selected element
  const newElement = await el?.prepend(webflow.elementPresets.DivBlock)

  // Print element Details
  console.log(JSON.stringify(newElement))

}

Designer Ability

element.append(newElement)

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

Syntax

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

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

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

  // Append newElement as a child to of the selected element
  const newElement = await el?.append(webflow.elementPresets.DivBlock)

  // Print element Details
  console.log(JSON.stringify(newElement))

}

Designer Ability