up.element up.element.createFromSelector(selector, [attrs])

JavaScript function

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() or use up.element.affix() to create an already-attached element.

Use up.hello() to activate JavaScript behavior within the created element.

Examples

To create an element with a given tag name:

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

To create an element with a given class:

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

To create an element with a given ID:

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

Setting attributes

To create an element with a given boolean attribute:

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

To create an element with a given attribute value:

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

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

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

Passing child nodes

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

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:

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

Setting inline styles

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

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