https://github.com/erf/elite-plus
build HTML declaratively using JS 559 bytes
https://github.com/erf/elite-plus
dom dom-api dom-manipulation js-dom js-library
Last synced: 2 months ago
JSON representation
build HTML declaratively using JS 559 bytes
- Host: GitHub
- URL: https://github.com/erf/elite-plus
- Owner: erf
- Created: 2022-11-17T18:13:26.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-11-25T01:01:40.000Z (over 2 years ago)
- Last Synced: 2025-03-09T02:50:30.615Z (3 months ago)
- Topics: dom, dom-api, dom-manipulation, js-dom, js-library
- Language: HTML
- Homepage: https://erf.github.io/elite-plus
- Size: 65.4 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# elite-plus
A tiny JavaScript library for building HTML declaratively.
This is a more descriptive version of [elite](https://github.com/erf/elite) which allows you to create elements using named arguments.
Given a Javascript Object or Array describing elements with a tag name (**n**), text (**t**), attributes (**a**), events (**e**) and children (**c**), the `el` function builds and returns a set of HTML elements.
## Object model
The object model is defined as folows:
```Javascript
const obj = {
n: 'p', // tag name
t: 'Hello', // text
a: { class: 'awesome', style: 'background: #F00' }, // attributes
e: { click: (e) => alert('YO') }, // events
c: [ // children
{ n: 'p', t: 'hello' },
{ n: 'p', t: 'yo' },
]
}
```
## API
`el(object|array)`
> Create an HTML element(s) given an object or array of objects as described in [Object model](#object-model)
`get(id)`
> Get element by **id**
`set(element|id, child)`
> Given an **element** or **id**, replace it's children with a given **child(s)** element
`add(elemnt|id, child)`
> Given an **element** or **id** append a **child(s)** element
*Please read the code to understand more, it's quite simple!*
## EXAMPLE
```Javascript
const app = el([
{ n: 'h1', t: data.title, a: { class: 'elite' } },
{ n: 'p', t: data.description, a: { style: "background: #ffe088; padding: 8pt;" } },
{ n: 'button', t: 'Press', a: { class: 'btn' }, e: { click: (e) => alert('YO') } },
{ n: 'p', t: 'Made with ❤ by @apptakk' },
])
set('app', app)
```
Result HTML:
```HTML
elite
a tiny declarative js dom lib
Press
Made with ❤ by @apptakk
```
[example.html](example.html)
[TODO.html](TODO.html)
[https://erf.github.io/elite](https://erf.github.io/elite)