---
name: "up.Layer.prototype.affix"
area: "API"
kind: "Instance method"
parent: "up.Layer class"
visibility: "experimental"
url: "https://unpoly.com/api/up.Layer.prototype.affix"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.Layer class](https://unpoly.com/api/up.Layer.md)</nav>

# up.Layer.prototype.affix(selector, [attrs])

**This feature is experimental**. Please [share](https://github.com/unpoly/unpoly/discussions) your experiences so we know what to keep or change.

Creates an element with the given `selector` and appends it to this layer's content.

For the [root layer](https://unpoly.com/api/up.layer.root.md) the element is appended to the `<body>`. For an overlay it is appended to the overlay's top-level content element, like its `<main>`.

Also see [`up.element.affix()`](https://unpoly.com/api/up.element.affix.md).

<nav aria-label="Contents">

#### Contents

- [Example](#example)
- [Parameters](#parameters)
- [Return value](#return-value)

</nav>

## Example {#example}

```js
layer = await up.layer.open({ content: '<main></main>' })
element = layer.affix('.klass')
element.parentElement // returns the <main> element
element.className // returns 'klass'
```

---

## Parameters {#parameters}

### Element {#parameters-element}

#### selector {#selector}

(required)

The CSS selector from which to create an element.

Type: string

#### [attrs] {#attrs}

(optional)

An object of attributes to set on the created element.

Type: [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)

#### [attrs.text] {#attrs.text}

(optional)

The [text content](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) of the created element.

Type: [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)

### General {#parameters-general}

#### [attrs.content] {#attrs.content}

(optional)

The [inner HTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) of the created element.

Type: [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)

#### [attrs.style] {#attrs.style}

(optional)

An object of CSS properties that will be set as the inline style of the created element. The given object must use kebab-case keys.

You may also pass a string with semicolon-separated styles.

Type: [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects) | string

---

## Return value {#return-value}

The created element.

Type: [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)