--- title: "Elements Block" slug: "elements-block" updated: 2021-08-06T16:54:14Z published: 2021-08-06T16:54:14Z canonical: "help.pillir.io/elements-block" --- > ## 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 Block The Elements blocks are explained below: Elements are used to dynamically alter the look and feel of components in the App. #### ## Create Element: It enables the user to create a new component (or element) with respect to the particular page. In this case, a new "button" is created. | **Input** | **Output** | **Block Layout** | **Generated Code** | | --- | --- | --- | --- | | Variable or Text element tag name | Returns created Element Object | ![](https://lh6.googleusercontent.com/FEI5GAyFlzHWxEXL9OFJdSPaxNPo7nmn7Ej7OOAsRO06sJss69IYfHxavBn6fA0J8A5bh5-3wz5VW5DS9UvdgiTCxXJaWnu9GSjOXa7XmuDdZ2liwIvv_0p_ICeg438if42QN1du) | ```javascript pillirFunctions. element_creation('BUTTON') ``` | #### ## Remove Element: This block enables the user to remove an existing element within the page. | **Input** | **Output** | **Block Layout** | **Generated Code** | | --- | --- | --- | --- | | Element Object | Removes given element object | ![](https://lh5.googleusercontent.com/bWH9Mlc_QH5hO5IvuGPorjvnFQFxV1wRElYAz-wKirq1xzY-8sjlb0Pgf4dR1RKsXY4sFKx7fr5Jb9opd4ODZuBj0JF3BemT3fYYGQCh0Zj9jhLDN_uEuQ0aBPIDdjuoEf-Ghojm) | ```javascript pillirFunctions. element_remove(element) ``` | #### ## 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 | Append input-2 element object to input-1 element object as a child element. | ![](https://lh3.googleusercontent.com/5p-2xKja596inuCtMF5VTqwEfi8yiA3xGzMP6xfA03bGS2Qsi4YKPvixK3pRTVVbbqPR-9fVyZk_pHEIlpMHOC7zgrNTaDhIAKm6FrjGy5ayfEjD0HFhL2huPEOlcRB7x2sTZjrB) | ```javascript pillirFunctions. element_append(element, element) ``` | #### ## 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** | | --- | --- | --- | --- | | Variable or Text (element id), Choose the element and get the type. | Returns element object or list of element object depends 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 pillirFunctions. element_get("id", 'id') ``` | #### ## Element Properties: **The Properties of elements include:** tabIndex, tagName, outerHTML, outerText, ownerDocument, parentNode, parentElement, previousSibling, previousElementSibling, scrollHeight, nextElementSibling, nextSibling, namespaceURI, lastElementChild, lastChild, isContentEditable, accessKey, attributes, childElementCount, lang, childNodes, children, classList, className, clientHeight, clientLeft, clientTop, contentEditable, dir, firstChild, firstElementChild, id, innerHTML, innerTextnodeName, nodeType, nodeValue, offsetWidth, offsetHeight, offsetLeft, offsetParent, offsetTop, scrollLeft, scrollTop, scrollWidth, textContent, title. Any of these properties' values can be fetched using the GetElementProperty block. It returns the object value (property) for the element as output. | **Input** | **Output** | **Block Layout** | **Generated Code** | | --- | --- | --- | --- | | Element Object, Choose the element property. Element Object for input-1, Variable or text for input-2, Choose the element property. | Returns element object's property as text. Set given input-2 property value to input-1 element object. | ![](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) ![](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/image-1620905606285.png) ![](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/image-1620905622761.png) | ```javascript pillirFunctions. element_get_properties( element, "innerHTML") pillirFunctions. element_set_properties ("background", element, 'green') ``` | #### ## Element Style: **Element styles consists of the following:** align-content, align-items, alignSelf, animationDelay, animationDirection, animationDuration, animationFillMode, animationIterationCount, animation, animationName, animationTimingFunction, animationPlayState, background, backgroundAttachment, backgroundColor, backgroundImage, backgroundPosition, backgroundRepeat, backgroundClip, backgroundOrigin, backgroundSize, backfaceVisibility, border, borderImage, borderBottom, borderRadius, borderBottomColor, borderBottomLeftRadius, borderBottomRightRadius, borderBottomStyle, borderBottomWidth, borderCollapse, borderColor, borderImageOutset, borderImageRepeat, borderImageSource, borderImageWidth, borderRight, borderRightColor, borderRightStyle, borderRightWidth, borderSpacing, borderStyle, borderTop, borderTopColor, borderTopLeftRadius, borderTopRightRadius, borderTopStyle, borderTopWidth, bottom, boxSizing, boxShadow boxDecorationBreak, captionSide, clear, clip, color, columnCount, columnFill, columnGap, columnRule, columnRuleColor, columnRuleStyle, columnRuleWidth, columnSpan, columnWidth, cursor, direction, display, emptyCells, filter, flex, flexBasis, flexGrow, flexShrink, flexWrap, cssFloat, font, fontFamily, fontSize, fontStyle, fontVariant, fontWeight, height, hyphens, justifyContent, left, letterSpacing, lineHeight, listStyle, listStyleImage, listStylePosition, listStyleType, margin, marginBottom, marginLeft, marginRight, marginTop, maxHeight, maxWidth, minHeight, minWidth, navDown, navIndex, navLeft, navRight, navUp, opacity, order, orphans, outline, outlineColor, outlineStyle, outlineWidth, overflow, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, pageBreakAfter, pageBreakBefore, pageBreakInside, perspective, perspectiveOrigin, position, quotes, resize, right, tableLayout, tabSize, textAlign, textAlignLast, textDecoration, textDecorationColor, textDecorationLine, textDecorationStyle, textIndent, textJustify, textShadow, textTransform, top, transformOrigin, transformStyle, transitionProperty, transitionDuration, transitionTimingFunction, transitionDelay, unicodeBidi, userSelect, verticalAlign, visibility, whiteSpace, width, wordBreak, wordSpacing, widows, zIndex, columns, counterReset, counterIncrement, counterReset. flexFlow, fontSizeAdjust, isolation, objectFit, outlineOffset, overflowX, overflowY, transform, transition, wordWrap. These blocks help establish different styles for the elements. | **Input** | **Output** | **Block Layout** | **Generated Code** | | --- | --- | --- | --- | | Element Object, Choose the element style. Element Object for input-1, Variable or Text for input-2, Choose the element style | Returns element object's style property as text 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-1620905794954.png) ![](https://cdn.document360.io/718af901-247b-46be-8ace-83da21839237/Images/Documentation/image-1620905812962.png) ![](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 pillirFunctions. element_style_get_property ("background", element) pillirFunctions. element_style_set_property ("background", element) ``` |