Lmnt NPM | npm.io

LMNT

Pronounced "element". Helper functions to simplify the creation of DOM elements in JavaScript.

No external dependencies. As unopinionated as possible, style everything on your own.

Installation

npm install lmnt

Usage

createEl(tagName, { properties }, { attributes }, { events });

Examples

import { createEl, addEl } from 'lmnt';

// create a paragraph element <p> and fill it with text:
const paragraph = createEl('p', { innerText: 'Here is a sample paragraph' });

// add it to the DOM:
addEl(paragraph);

// create a some buttons with events:
const hoverMe = createEl('button', { className: 'butttons-hover', innerText: 'Hover over me' }, {}, { mouseover: ({ target }) => { target.innerText = 'Hovering'; }, mouseout: ({ target }) => { target.innerText = 'Hover me'; } });
const clickMe = createEl('button', { className: 'buttons-click', innerText: 'click me!' }, {}, { click: () => { alert('you clicked me!'); } });

// create a container and add the buttons to it:
const buttons = createEl('div', { className: 'buttons' });
addEl(buttons, hoverMe, clickMe);

// finally add the container to the DOM:
addEl(buttons);

// or add elements directly to the DOM:
const one = createEl('div', { innerText: 'one' });
const two = createEl('div', { innerText: 'two' });
addEl(document.body, one, two);

// more complex elements:
const list = createEl('ol', { values: ['cats', 'dogs', 'geckos'] });
const selector = createEl('select', { values: ['one', 'two', 'three'], value: 'two' });
const radio = createEl('radio', { values: ['red', 'green', 'blue'] });
const checkbox = createEl('checkbox', { values: ['apples', 'bananas', 'pears'], value: ['pears'] });