---
name: "up.element.createFromSelector"
area: "API"
kind: "JavaScript function"
parent: "up.element module"
url: "https://unpoly.com/api/up.element.createFromSelector"
---
<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.createFromSelector(selector, [attrs])

Creates an element matching the given CSS selector.

The created element will not yet be attached to the DOM tree. Attach it with [`Element#appendChild()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild), or use [`up.element.affix()`](https://unpoly.com/api/up.element.affix.md) to create an already-attached element.

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

- [Examples](#examples)
- [Setting attributes](#setting-attributes)
- [Passing child nodes](#passing-child-nodes)
- [Setting inline styles](#setting-inline-styles)
- [Parameters](#parameters)
- [Return value](#return-value)

</nav>

## Examples {#examples}

To create an element with a given tag name:

```js
element = up.element.createFromSelector('span')
// element is <span></span>
```

To create an element with a given class:

```js
element = up.element.createFromSelector('.klass')
// element is <div class="klass"></div>
```

To create an element with a given ID:

```js
element = up.element.createFromSelector('#foo')
// element is <div id="foo"></div>
```

## Setting attributes {#setting-attributes}

To create an element with a given boolean attribute:

```js
element = up.element.createFromSelector('[attr]')
// element is <div attr></div>
```

To create an element with a given attribute value:

```js
element = up.element.createFromSelector('[attr="value"]')
// element is <div attr="value"></div>
```

You may also pass an object of attribute names and values as a second argument:

```js
element = up.element.createFromSelector('div', { attr: 'value' })
// element is <div attr="value"></div>
```

## Passing child nodes {#passing-child-nodes}

You may set the element's inner text by passing a `{ text }` option (HTML control characters will be escaped):

```js
element = up.element.createFromSelector('div', { text: 'inner text' })
// element is <div>inner text</div>
```

You may set the element's inner HTML by passing a `{ content }` option:

```js
element = up.element.createFromSelector('div', { content: '<span>inner text</span>' })
// element is <div><span>inner text</span></div>
```

## Setting inline styles {#setting-inline-styles}

You may set inline styles by passing an object of CSS properties as a `{ style }` option:

```js
element = up.element.createFromSelector('div', { style: { color: 'red' }})
// element is <div style="color: red"></div>
```

---

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