> For the complete documentation index, see [llms.txt](https://docs.devolutions.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devolutions.net/powershell-universal/es/aplicaciones/components/utilities/element.md).

# Elemento

El cmdlet `New-UDElement` le permite crear elementos React personalizados dentro de su aplicación. De forma similar a `New-UDHtml`, puede definir elementos HTML utilizando `New-UDElement`. A diferencia de `New-UDHtml`, puede actualizar elementos, establecer la actualización automática y aprovechar el sistema de componentes de React.

## Crear un elemento

Debe especificar `-Tag` y `-Content` al crear un elemento. El siguiente ejemplo crea una etiqueta div.

```powershell
New-UDElement -Tag 'div' -Content { 'Hello' }
```

Puede anidar componentes unos dentro de otros para crear estructuras HTML. Por ejemplo, podría crear una lista no ordenada con el siguiente ejemplo.

```powershell
New-UDElement -Tag 'ul' -Content {
    New-UDElement -Tag 'li' -Content { 'First' }
    New-UDElement -Tag 'li' -Content { 'Second' }
    New-UDElement -Tag 'li' -Content { 'Third' }
}
```

## Establecer atributos

Puede seleccionar atributos de un elemento (como atributos HTML) utilizando el parámetro `-Attributes`. Este parámetro acepta una tabla hash de nombres y valores de atributos. El siguiente ejemplo crea texto en rojo.

```powershell
New-UDElement -Tag 'div' -Content { 'Hello' } -Attributes @{
    style = @{
        color = 'red'
    }
}
```

Puede envolver cualquier componente con New-UDElement y añadir un controlador de eventos.

```powershell
New-UDElement -Tag div -Content {
    New-UDIcon -Icon "user"
} -Attributes @{
    onClick = {
        Show-UDToast "Nice!"
    }
}
```

## Elementos con actualización automática

Puede definir los parámetros `-AutoRefresh`, `-RefreshInterval` y `-Endpoint` para crear un elemento que se actualice en un intervalo determinado. El siguiente ejemplo crea un elemento que se actualiza cada segundo y muestra la hora actual.

```powershell
New-UDElement -Tag 'div' -Endpoint {
    Get-Date
} -AutoRefresh -RefreshInterval 1
```

## Establecer propiedades de elementos de forma dinámica

Puede utilizar el cmdlet `Set-UDElement` para establecer propiedades y contenido de elementos de forma dinámica. El siguiente ejemplo establece el contenido del elemento en la hora actual.

```powershell
New-UDElement -Tag 'div' -Id 'myElement' -Content { }

New-UDButton -Text 'Click Me' -OnClick {
    Set-UDElement -Id 'myElement' -Content { Get-Date }
}
```

También puede establecer atributos utilizando el parámetro `-Properties` de `Set-UDElement`. El siguiente ejemplo establece la hora actual y cambia el color a rojo.

```powershell
    New-UDElement -Tag 'div' -Id 'myElement' -Content { }

    New-UDButton -Text 'Click Me' -OnClick {
        Set-UDElement -Id 'myElement' -Content { Get-Date } -Properties @{ Attributes = @{ style = @{ color = "red" } } }
    }
```

## Añadir elementos secundarios

Puede añadir elementos secundarios utilizando `Add-UDElement`. El siguiente ejemplo añade elementos de lista secundarios a una lista no ordenada.

```powershell
New-UDElement -Tag 'ul' -Content {

} -Id 'myList'

New-UDButton -Text 'Click Me' -OnClick {
    Add-UDElement -ParentId 'myList' -Content {
        New-UDElement -Tag 'li' -Content { Get-Date }
    }
}
```

## Borrar elementos secundarios

Puede borrar los elementos secundarios de un elemento utilizando `Clear-UDElement`. El siguiente ejemplo borra todos los elementos de lista de una lista no ordenada.

```powershell
New-UDElement -Tag 'ul' -Content {
    New-UDElement -Tag 'li' -Content { 'First' }
    New-UDElement -Tag 'li' -Content { 'Second' }
    New-UDElement -Tag 'li' -Content { 'Third' }
}  -Id 'myList'

New-UDButton -Text 'Click Me' -OnClick {
    Clear-UDElement -Id 'myList'
}
```

## Forzar la recarga de un elemento

Puede forzar la recarga de un elemento utilizando `Sync-UDElement`. El siguiente ejemplo hace que el div se recargue con la fecha actual.

```powershell
New-UDElement -Tag 'div' -Endpoint {
    Get-Date
} -Id 'myDiv'

New-UDButton -Text 'Click Me' -OnClick {
    Sync-UDElement -Id 'myDiv'
}
```

## Eliminar un elemento

Puede eliminar un elemento utilizando `Remove-UDElement`.

```powershell
New-UDElement -Tag 'div' -Endpoint {
    Get-Date
} -Id 'myDiv'

New-UDButton -Text 'Click Me' -OnClick {
    Remove-UDElement -Id 'myDiv'
}
```

## Ejemplo: selector de color

Cree un selector de color con un controlador de eventos OnChange utilizando New-UDElement.

<figure><img src="/files/NoY0PPS36foKcmg8boOy" alt=""><figcaption><p>Selector de color</p></figcaption></figure>

```powershell
function New-UDColorPicker {
    [CmdletBinding()]
    param(
        [Parameter()]
        [string]$Id = [Guid]::NewGuid(),
        [Parameter()]
        [ScriptBlock]$OnChange,
        [Parameter()]
        [string]$Value,
        [Parameter()]
        [Hashtable]$Style
    )

    New-UDElement -Id $Id -Tag "input" -Attributes @{
        value = $Value
        type = "color"
        onChange = $OnChange
        style = $Style
    }
}

New-UDApp -Content { 
    New-UDColorPicker -Id 'colorPicker' -OnChange {
        Show-UDToast $EventData -Position topLeft -Persistent
    }
}
```

## API

* [**Get-UDElement**](/powershell-universal/es/comandos-de-powershell/get-udelement.md)
* [**Set-UDElement**](/powershell-universal/es/comandos-de-powershell/set-udelement.md)
* [**Remove-UDElement**](/powershell-universal/es/comandos-de-powershell/remove-udelement.md)
* [**Add-UDElement**](/powershell-universal/es/comandos-de-powershell/add-udelement.md)
* [**Clear-UDElement**](/powershell-universal/es/comandos-de-powershell/clear-udelement.md)
* [**Sync-UDElement**](/powershell-universal/es/comandos-de-powershell/sync-udelement.md)
* [**Select-UDElement**](/powershell-universal/es/comandos-de-powershell/select-udelement.md)

#### Véase también

* [Devolutions Academy – Añadir tablas de datos](https://academy.devolutions.net/student/page/3466031-adding-data-tables?curriculum_activity_id=5612258\&path_id=3465905\&sid=1b852f65-706e-452f-a2b6-96b76149ddb2\&sid_i=0)

***


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.devolutions.net/powershell-universal/es/aplicaciones/components/utilities/element.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.