> 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/de/apps/components/utilities/element.md).

# Element

Das Cmdlet `New-UDElement` ermöglicht Ihnen das Erstellen benutzerdefinierter React-Elemente in Ihrer App. Ähnlich wie bei `New-UDHtml` können Sie HTML-Elemente mit `New-UDElement` definieren. Im Gegensatz zu `New-UDHtml` können Sie Elemente aktualisieren, die automatische Aktualisierung festlegen und das React-Komponentensystem nutzen.

## Ein Element erstellen

Beim Erstellen eines Elements müssen Sie `-Tag` und `-Content` angeben. Das folgende Beispiel erstellt ein div-Tag.

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

Sie können Komponenten ineinander verschachteln, um HTML-Strukturen zu erstellen. Zum Beispiel könnten Sie mit dem folgenden Beispiel eine unsortierte Liste erstellen.

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

## Attribute festlegen

Sie können Attribute eines Elements (wie HTML-Attribute) mithilfe des Parameters `-Attributes` auswählen. Dieser Parameter akzeptiert eine Hashtabelle mit Attributnamen und -werten. Das folgende Beispiel erstellt roten Text.

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

Sie können jede Komponente mit New-UDElement umschließen und einen Event-Handler hinzufügen.

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

## Elemente automatisch aktualisieren

Sie können die Parameter `-AutoRefresh`, `-RefreshInterval` und `-Endpoint` definieren, um ein Element zu erstellen, das in einem bestimmten Intervall aktualisiert wird. Das folgende Beispiel erstellt ein Element, das jede Sekunde aktualisiert wird und die aktuelle Uhrzeit anzeigt.

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

## Elementeigenschaften dynamisch festlegen

Sie können das Cmdlet `Set-UDElement` verwenden, um Elementeigenschaften und -inhalte dynamisch festzulegen. Das folgende Beispiel setzt den Inhalt des Elements auf die aktuelle Uhrzeit.

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

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

Sie können Attribute auch mithilfe des Parameters `-Properties` von `Set-UDElement` festlegen. Das folgende Beispiel setzt die aktuelle Uhrzeit und ändert die Farbe zu Rot.

```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" } } }
    }
```

## Untergeordnete Elemente hinzufügen

Sie können untergeordnete Elemente mit `Add-UDElement` hinzufügen. Das folgende Beispiel fügt einer unsortierten Liste untergeordnete Listenelemente hinzu.

```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 }
    }
}
```

## Untergeordnete Elemente löschen

Sie können die untergeordneten Elemente eines Elements mit `Clear-UDElement` löschen. Das folgende Beispiel löscht alle Listenelemente aus einer unsortierten Liste.

```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'
}
```

## Ein Element zum Neuladen zwingen

Sie können ein Element mit `Sync-UDElement` zum Neuladen zwingen. Im folgenden Beispiel wird das div mit dem aktuellen Datum neu geladen.

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

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

## Ein Element entfernen

Sie können ein Element mit `Remove-UDElement` entfernen.

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

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

## Beispiel: Farbwähler

Erstellen Sie einen Farbwähler mit einem OnChange-Event-Handler unter Verwendung von New-UDElement.

<figure><img src="/files/EdNtL2CxBdTEKTyQDJQo" alt=""><figcaption><p>Farbwähler</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/de/powershell-befehle/get-udelement.md)
* [**Set-UDElement**](/powershell-universal/de/powershell-befehle/set-udelement.md)
* [**Remove-UDElement**](/powershell-universal/de/powershell-befehle/remove-udelement.md)
* [**Add-UDElement**](/powershell-universal/de/powershell-befehle/add-udelement.md)
* [**Clear-UDElement**](/powershell-universal/de/powershell-befehle/clear-udelement.md)
* [**Sync-UDElement**](/powershell-universal/de/powershell-befehle/sync-udelement.md)
* [**Select-UDElement**](/powershell-universal/de/powershell-befehle/select-udelement.md)

#### Siehe auch

* [Devolutions Academy – Datentabellen hinzufügen](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/de/apps/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.