---
name: "up.element.affix"
area: "API"
kind: "JavaScript function"
parent: "up.element module"
url: "https://unpoly.com/api/up.element.affix"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.element module](https://unpoly.com/api/up.element.md)</nav>

# up.element.affix(parent, [position], selector, [attrs])

Creates an element matching the given CSS selector and attaches it to the given parent element.

To create a detached element from a selector, see [`up.element.createFromSelector()`](https://unpoly.com/api/up.element.createFromSelector.md).

Use [`up.hello()`](https://unpoly.com/api/up.hello.md) to activate [JavaScript behavior](https://unpoly.com/api/up.script.md) within the created element.

<nav aria-label="Contents">

#### Contents

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

</nav>

## Example {#example}

```js
element = up.element.affix(document.body, '.klass')
element.parentElement // returns document.body
element.className // returns 'klass'
```

See [`up.element.createFromSelector()`](https://unpoly.com/api/up.element.createFromSelector.md) for many more examples.

---

## Parameters {#parameters}

### Position {#parameters-position}

#### parent {#parent}

(required)

The parent to which to attach the created element.

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

#### [position='beforeend'] {#position}

(optional)

The position of the new element in relation to `parent`.

| Value | Insert position |
| --- | --- |
| `"beforebegin"` | Insert before `reference`, as a new sibling. |
| `"afterbegin"` | Prepend to `reference`, before its first child. |
| `"beforeend"` | Append to `reference`, after its last child. |
| `"afterend"` | Insert after `reference`, as a new sibling. |

Type: string

### 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)