Managing text content is essential for keeping content fresh and relevant. These methods let you handle an element's text, ensuring it's always up-to-date.

To effectively use the methods, choose an element that already has its textContent property set to true. This property is read-only, so it's important to select elements that have this attribute. Using these methods with elements that don't have this property will return an error.

Methods

element.setTextContent(content)

Set text content for an element. Be sure to check that an element has its textContent property set to true.

Syntax

element.setTextContent(content: string): Promise<null>>

Parameters

• content: string - Text to add to the element

Returns

Promise<null>

A Promise that resolves to null.

Example

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

if (selectedElement?.textContent) {

  // Set and print text content
  const text = await selectedElement.setTextContent("Lorem Ipsum")
  console.log(selectedElement.textContent)

}

Getting Text Content

The textContent of an element is automatically created as a child StringElement of that element. To retrieve the text content from an element, you'll need to get the child StringElement of your target element. Once you've retrieved the StringElement you can use the getText() method to get the text content of your element.

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

if (selectedElement?.textContent && selectedElement?.children) {

  // Get Child Elements
  const children = await selectedElement.getChildren();

  // Filter string elements from children
  const strings = children.filter(child => child.type === "String");

  // Initialize an array to hold text content
  let textContent = [];

  // Loop over string elements to get text
  for (const myString of strings) {
    if (myString.type === "String") {
      const text = await myString.getText();
      textContent.push(text);
    }
  }

  // Print text
  console.log(textContent);
}