Nest element as last child

element.append(newElement, settings?)

Insert an element onto the page as the last child of the target element.

Syntax

1
element.append(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 el = await webflow.getSelectedElement();
3
4
// Check if element supports child elements
5
if (el?.children) {
6
7
  // Append elements as children of the selected element
8
  const newDiv = await el?.append(webflow.elementPresets.DivBlock)
9
  const newP = await el?.append('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
  // Append a div element as a child
8
  const newDiv = await el.append(webflow.elementPresets.DivBlock)
9
10
  // Append an image element with initial settings applied at creation time
11
  const newImg = await el.append(webflow.elementPresets.Image, {
12
    assetId: 'xxxx',
13
    altText: 'A sunset photo',
14
  })
15
16
  // Append an element using a string tag, with a custom DOM ID
17
  const newSection = await el.append('section', { domId: 'my-section' })
18
19
  console.log(JSON.stringify(newDiv))
20
21
}

Designer Ability