Element-JS
Easy DOM object creation.
Usage
let textInput = new El('input')
.attributes({
type: 'text',
name: 'exampleInput',
})
.styles({
borderRadius: '4px',
border: '1px solid green',
})
.events({
input: (e) => console.log(e.target.value),
focus: (e) => console.log("Element focused"),
})
document.body.appendChild(textInput.node)Methods
Id
Sets the id of the element.
Syntax
el.id(id)Examples
el.id('submitButton')
el.id(() => 'submitButton' + index))Arguments
| Argument | Type | Description |
|---|---|---|
| id | String, Number | The value to set as the id attribute. |
| id | Function | A funcition which will be called and passed back to id(). Warning: This could lead to infinite recursion if the function continuously returns functions. |
Classes
Sets classes on the element.
Syntax
el.classes(...classes)Examples
el.classes('button')
el.classes('large', 'red', 'button')Arguments
| Argument | Type | Description |
|---|---|---|
| ...classes | String | A list of classes to add to the element |
Attributes
Sets attributes on the element.
Syntax
el.attributes(attributes)Examples
el.attributes({
name: 'username',
placeholder: 'Username',
minlength: 5,
})Arguments
| Argument | Type | Description |
|---|---|---|
| attributes | Object | A key value pair list of attributes and their values. |
Styles
Sets inline styles on the element.
Syntax
el.styles(styles)Examples
el.styles({
width: '150px',
background: '#CCC',
borderRadius: '5px',
})Arguments
| Argument | Type | Description |
|---|---|---|
| styles | Object | A key value pair list of styles and their values. |
Events
Sets event handlers on the element.
Syntax
el.events(events)Examples
el.events({
click: () => console.log('Clicked'),
focus: () => console.log('Focused'),
input: (e) => console.log(e.target.value),
})Arguments
| Argument | Type | Description |
|---|---|---|
| events | Object | A key value pair list of events and their handlers. |
Content
Sets the content of the element.
Syntax
el.content(...content)Examples
el.content('Hello world!')
el.content(anotherElement)
el.content(el1, el2, el3)
el.content(el1, "A string!", el2)Arguments
| Argument | Type | Description |
|---|---|---|
| content | String | A string to append to the inner text of the element. |
| content | Element | An element to append as a child of the element. |