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

# Element

Opret brugerdefinerede React-elementer i PowerShell Universal-apps med New-UDElement, herunder attributter, automatisk opdatering, dynamiske opdateringer og underordnede elementer.

Cmdlet'en `New-UDElement` giver Dem mulighed for at oprette brugerdefinerede React-elementer i Deres app. På samme måde som med `New-UDHtml` kan De definere HTML-elementer ved hjælp af `New-UDElement`. I modsætning til `New-UDHtml` kan De opdatere elementer, angive automatisk opdatering og udnytte React-komponentsystemet.

## Opret et element

De skal angive `-Tag` og `-Content`, når De opretter et element. Eksemplet nedenfor opretter et div-mærke.

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

De kan indlejre komponenter i hinanden for at oprette HTML-strukturer. De kan f.eks. oprette en usorteret liste med følgende eksempel.

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

## Angivelse af attributter

De kan vælge attributter for et element (f.eks. HTML-attributter) ved hjælp af parameteren `-Attributes`. Denne parameter accepterer en hashtable med attributnavn og værdier. Nedenstående eksempel opretter rød tekst.

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

De kan ombryde enhver komponent med New-UDElement og tilføje en hændelseshandler.

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

## Automatisk opdatering af elementer

De kan definere parametrene `-AutoRefresh`, `-RefreshInterval` og `-Endpoint` for at oprette et element, der opdateres med et bestemt interval. Eksemplet nedenfor opretter et element, der opdateres hvert sekund og viser det aktuelle klokkeslæt.

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

## Angivelse af elementegenskaber dynamisk

De kan bruge cmdlet'en `Set-UDElement` til at angive elementegenskaber og indhold dynamisk. Følgende eksempel angiver elementets indhold til det aktuelle klokkeslæt.

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

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

De kan også angive attributter ved hjælp af parameteren `-Properties` på `Set-UDElement`. Følgende eksempel sætter det aktuelle tidspunkt og ændrer farven til rød.

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

## Tilføjelse af underordnede elementer

De kan tilføje underordnede elementer ved hjælp af `Add-UDElement`. Følgende eksempel tilføjer underordnede listeelementer til en usorteret liste.

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

## Rydning af underordnede elementer

De kan rydde de underordnede elementer i et element ved hjælp af `Clear-UDElement`. Følgende eksempel rydder alle listeelementerne fra en usorteret 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'
}
```

## Gennemtvingelse af et elements genindlæsning

De kan gennemtvinge genindlæsning af et element ved hjælp af `Sync-UDElement`. Følgende eksempel får div-elementet til at genindlæse med den aktuelle dato.

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

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

## Fjernelse af et element

De kan fjerne et element ved hjælp af `Remove-UDElement`.

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

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

## Eksempel: farvevælger

Opret en farvevælger med en OnChange-hændelseshandler ved hjælp af New-UDElement.

```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/da/powershell-kommandoer/get-udelement.md)
* [**Set-UDElement**](/powershell-universal/da/powershell-kommandoer/set-udelement.md)
* [**Remove-UDElement**](/powershell-universal/da/powershell-kommandoer/remove-udelement.md)
* [**Add-UDElement**](/powershell-universal/da/powershell-kommandoer/add-udelement.md)
* [**Clear-UDElement**](/powershell-universal/da/powershell-kommandoer/clear-udelement.md)
* [**Sync-UDElement**](/powershell-universal/da/powershell-kommandoer/sync-udelement.md)
* [**Select-UDElement**](/powershell-universal/da/powershell-kommandoer/select-udelement.md)

### Se også

* [Devolutions Academy – Tilføjelse af datatabeller](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)
* [Devolutions Academy – Hentning af brugeroplysninger](https://academy.devolutions.net/student/activity/3543018-part-3-fetching-user-details)

***


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.