webflow.elementBuilder(webflow.elementPresets.DOM)

Creates the root element for a new element structure, which can then append DOM elements to its hierarchy. This method is optimized for bulk creation, particularly useful when dealing with complex hierarchical designs. Before placing the on the canvas, set the HTML Tag of the DOM element using the element.setTag() method.

📘

Limitations

DOM Elements: Currently, only DOM Elements can be created and inserted as root or child elements using this method.

Syntax

webflow.elementBuilder(webflow.elementPresets.DOM): BuilderElement

Parameters

• newElement: webflow.elementPresets.DOM> - The new element to be inserted into the hierarchy. This element is derived from the webflow.elementPresets object. Currently, only DOM elements can be inserted.

Returns

BuilderElement

A BuilderElement designed for creating and manipulating hierarchical structures.

Example

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

// Build an element. We only support DOM elements and append for now. 
const rootElement = webflow.elementBuilder(webflow.elementPresets.DOM)

// Append a DOM element to the element structure.
const childElement = rootElement.append(webflow.elementPresets.DOM)
childElement.setTag('svg')
childElement.setAttribute("title", "hello");
childElement.setStyles([myStyle])

if (selectedElement?.children) {
  // Add root element to the deisgner by appending to selected Element
  await selectedElement.append(rootElement)
}