1.1.5 • Published 3 years ago
An easy way to create complex DOM elements with a lot of attributes using vanilla JS
Getting Started
yarn add dometizer
Let's create a simple button
element with custom class names and a custom data-attribute
import { create } from 'dometizer'
const myButton = create({
type: 'button',
className: ['button', 'button--primary'],
'data-attribute': 'hello'
})
Methods
create
Argument | Description | Default |
---|
type | String: HTML Type of element to be created | div |
className | Array: Classes to be added to HTMLElement | [] |
text | String: Inner text to be added to the HTMLElement | undefined |
children | Array: List of child elements of the DOM Element we are creating | [] |
import { create } from 'dometizer'
const myButton = create({
type: 'button',
className: ['button', 'button--primary'],
'data-attribute': 'hello',
id: 'my-button',
text: 'Click Me!'
})
createFromSelector
Argument | Description | Default |
---|
selector | String: given selector to create an object | undefined |
import { createFromSelector } from 'dometizer'
const button = createFromSelector('button#the-button.button.button--primary')
extend
Argument | Description | Default |
---|
className | Array: Classes to be added to HTMLElement | [] |
text | String: Inner text to be added to the HTMLElement | undefined |
children | Array: List of child elements of the DOM Element we are creating | [] |
import { extend } from 'dometizer'
const extendedButton = extend(button, {
text: 'Click Me!',
className: ['button--primary'],
'data-toggle': 'modal'
})
append
Argument | Description | Default |
---|
container | HTMLElement: Container element to append items | |
children | Array: List of child elements of the DOM Element we are creating | [] |
import { append } from 'dometizer'
append(myElement, [the, child, elements])