FacileJS

Appearance

Function: addElement() ​

Overload 1 ​

addElement<K>(tag): HTMLElementTagNameMap[K]

Defined in: dom.ts:339

Creates a new element and appends it to document.body.

Type Parameters ​

K ​

K extends keyof HTMLElementTagNameMap

Parameters ​

tag ​

K

The HTML tag name of the element to create.

Returns ​

HTMLElementTagNameMap[K]

Returns the created element.

Example ​

ts
const p = facile.addElement('p');

Overload 2 ​

addElement<K>(tag, parent, index?): HTMLElementTagNameMap[K]

Defined in: dom.ts:356

Creates a new element and inserts it into the given parent element. The index defines the position among the parent's children, and is clamped to the valid range [0, parent.children.length]. Defaults to appending at the end.

Type Parameters ​

K ​

K extends keyof HTMLElementTagNameMap

Parameters ​

tag ​

K

The HTML tag name of the element to create.

parent ​

HTMLElement

The parent element to insert into.

index? ​

number

The position among the parent's children. Defaults to the end.

Returns ​

HTMLElementTagNameMap[K]

Returns the created element.

Example ​

ts
// HTML
<div id="container"></div>
// JS
const el = facile.getElement('#container');
const p = facile.addElement('p', el);

Overload 3 ​

addElement<K, P>(tag, parentTag, index?): HTMLElementTagNameMap[K]

Defined in: dom.ts:377

Creates a new element and inserts it into the first element matching the given tag name. Falls back to document.body if no matching element is found. The index defines the position among the parent's children, and is clamped to the valid range [0, parent.children.length]. Defaults to appending at the end.

Type Parameters ​

K ​

K extends keyof HTMLElementTagNameMap

P ​

P extends keyof HTMLElementTagNameMap

Parameters ​

tag ​

K

The HTML tag name of the element to create.

parentTag ​

P

The HTML tag name of the parent element to insert into.

index? ​

number

The position among the parent's children. Defaults to the end.

Returns ​

HTMLElementTagNameMap[K]

Returns the created element.

Example ​

ts
// HTML
<div></div>
// JS
const p = facile.addElement('p', 'div');

Overload 4 ​

addElement<K>(tag, selector, index?): HTMLElementTagNameMap[K]

Defined in: dom.ts:398

Creates a new element and inserts it into the first element matching the given CSS selector. Falls back to document.body if no matching element is found. The index defines the position among the parent's children, and is clamped to the valid range [0, parent.children.length]. Defaults to appending at the end.

Type Parameters ​

K ​

K extends keyof HTMLElementTagNameMap

Parameters ​

tag ​

K

The HTML tag name of the element to create.

selector ​

string

A CSS selector string for the parent element.

index? ​

number

The position among the parent's children. Defaults to the end.

Returns ​

HTMLElementTagNameMap[K]

Returns the created element.

Example ​

ts
// HTML
<div id="container"></div>
// JS
const p = facile.addElement('p', '#container');