https://github.com/erf/elite

build HTML declaratively using JS 548 bytes
https://github.com/erf/elite

dom dom-api dom-manipulation js-dom js-library

Last synced: about 2 months ago
JSON representation

build HTML declaratively using JS 548 bytes

• Host: GitHub
• URL: https://github.com/erf/elite
• Owner: erf
• Created: 2020-10-20T20:08:10.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2022-12-20T12:04:36.000Z (about 2 years ago)
• Last Synced: 2023-06-26T14:00:33.843Z (over 1 year ago)
• Topics: dom, dom-api, dom-manipulation, js-dom, js-library
• Language: HTML
• Homepage: https://erf.github.io/elite
• Size: 66.4 KB
• Stars: 9
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# elite

A tiny JavaScript library for building HTML declaratively.

# API

`el(tag, text, attributes, events, children)`

> Creates an HTML element. Arguments after **tag** can be omitted and replaced with **children**. You can also omit `text` and pass the next arguments. Elements can be nested using children. 

`get(id)`

> Get element by **id**

`set(element|id, child)`

> Given an **element** or **id**, replace children with a given **child** element(s)

`add(elemnt|id, child)`

> Given an **element** or **id**, append a **child** element(s)

*Please read the code to understand more, it's quite simple!*

## EXAMPLE

```Javascript

const app = el('div', [

    el('h1', 'elite', { class: 'elite' }),

    el('p', 'a tiny declarative js dom lib', { style: "background: #ffe088; padding: 8pt;" }),

    el('div', [

        el('button', 'YO', {}, { click: (e) => alert('YO !') }),

    ]),

    el('p', 'Made with ❤ by @apptakk'),

])

set('app', app)

```

Result HTML:

```HTML

    


        
elite

        
a tiny declarative js dom lib

        


            YO

        

        
Made with ❤ by @apptakk

    


```

[example.html](example.html)

[TODO.html](TODO.html)

[https://erf.github.io/elite](https://erf.github.io/elite)

PS !

I've built a slightly more descriptive, but less compact, version of this library called [elite-plus](https://github.com/erf/elite-plus)