---
title: "Elements Component"
slug: "elements-component"
updated: 2024-02-22T05:05:22Z
published: 2024-02-22T05:05:22Z
canonical: "help.pillir.io/elements-component"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.pillir.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Elements Component

The Elements component are used to dynamically alter the look and feel of components in the App. They include the following blocks:

## Create Element

It enables the user to create a new component (or element) in a particular page. In this case, a new "button" is created.

| Input | Output | Block Layout | Generated Code |
| --- | --- | --- | --- |
| Variable or Text element tag name | Returns the created Element object | ![CreateElement](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/CreateElement.png) | ```javascript __er.createElement('BUTTON'); ``` |

## Remove Element

This block enables the user to remove an existing element within a page.

| Input | Output | Block Layout | Generated Code |
| --- | --- | --- | --- |
| Element Object | Removes the given element object | ![RemoveElement](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/RemoveElement.png) | ```javascript __er.removeElement(); ``` |

## Append Element

This block is used to add another object within an existing element or add another element within an element. Multiple elements can be appended to a single element.

| Input | Output | Block Layout | Generated Code |
| --- | --- | --- | --- |
| Element Object for all input fields | Append input-2 element object to input-1 element object as a child element. | ![AppendElement](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/AppendElement.png) | ```javascript __er.appendElement(, ); ``` |

## GetElement

The GetElement block works by fetching the element by: Id, ClassName, Name, Tag Name. It returns the value that has been selected within the block.

| Input | Output | Block Layout | Generated Code |
| --- | --- | --- | --- |
| Choose the Get element by type from the dropdown list. Variable or Text - input-1 | Returns element object or list of element objects based on choice. | ![](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/image-1620905460809.png) ![](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/image-1620905478207.png) | ```javascript __er.getElementBy("id", 'id'); ``` |

## GetElement Property

The GetElementProperty block fetches the property value for the property selected in the dropdown list. It returns the object value (property) for the element as output.

| Input | Output | Block Layout | Generated Code |
| --- | --- | --- | --- |
| Choose the element property from the dropdown list, input-1 - Element Object | Returns element object's property as text. | ![](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/image-1620905558086.png) ![](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/image-1620905582257.png) | ```javascript item = __er.getElementProperties(, "innerHTML"); ``` |

## SetElement Property

The SetElementProperty block sets the element property value for the property selected in the dropdown list.

| Input | Output | Block Layout | Generated Code |
| --- | --- | --- | --- |
| Choose the element property. Element Object for input-1, Variable or text for input-2 | Set given input-2 property value to input-1 element object. | ![Setelementproperty](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/Setelementproperty.png) | ```javascript __er.setElementProperties("title", , 'Hello', ""); ``` |

## RemoveElementProperty

This block removes a property from an element.

| Input | Output | Block Layout | Generated Code |
| --- | --- | --- | --- |
| Element object in input-1 Attribute name in Text or variable in input-2 | Removes the given element property | ![Removeattribute](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/Removeattribute.png) | ```javascript __er.removeElementAttribute(, "Name"); ``` |

## GetElementStyle

This block returns the element style used in the element as a text value.

| Input | Output | Block Layout | Generated Code |
| --- | --- | --- | --- |
| Choose the element style from the dropdown list Element Object in input-1 | Returns element object's style property as text | ![](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/image-1620905794954.png) | ```javascript __er.getElementStyleProperties("background", ); ``` |

## SetElementStyle

This block sets an element style to an element.

| Input | Output | Block Layout | Generated Code |
| --- | --- | --- | --- |
| Choose the element style from the dropdown list Element Object for input-1, Variable or Text for input-2, | Set the element style value input-2 to the element object input-1. | ![](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/image-1620905826090.png) ![](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/image-1620905841127.png) | ```javascript __er.setStyle("background", , ); ``` |