https://github.com/hieunc229/element-creator
Element Creator helps you manage, create HTML DOM elements quick and easy
https://github.com/hieunc229/element-creator
element-create element-ui javascript library ui vdom virtual-dom
Last synced: 4 months ago
JSON representation
Element Creator helps you manage, create HTML DOM elements quick and easy
- Host: GitHub
- URL: https://github.com/hieunc229/element-creator
- Owner: hieunc229
- License: mit
- Created: 2017-11-10T03:08:59.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-18T03:44:12.000Z (about 7 years ago)
- Last Synced: 2025-02-19T22:03:28.943Z (4 months ago)
- Topics: element-create, element-ui, javascript, library, ui, vdom, virtual-dom
- Language: JavaScript
- Homepage:
- Size: 31.3 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# element-creator [](https://travis-ci.org/hieunc229/element-creator) [](https://unpkg.com/[email protected]/build/element-creator.min.js) [](https://www.npmjs.com/package/element-creator) [](https://opensource.org/licenses/MIT)
A library that helps to create interactive HTML elements (virtual dom) easily. Inspired by MithrilJs framework.
- [Installation](#installation)
- [Examples](#examples)
- [Documentation](#documentation)
## Installation
element-creator is available on NPM and as a Javascript library.
Install on NPM
```ssh
npm install element-creator
```
Or include on html file on unpkg
```html
```
## Examples:
A one page content example located at `build/index.html`. Or a quick demo below
```javascript
// using node with es6, otherwise var e = require('element-creator');
import e from 'element-creator';
var myDiv = e('div#myElement.class__1[name=awesome-div]', 'My awesome div', {
on: { 'click': function(e) {
alert('You have clicked on My awesome div');
}}
})
```
The variable `myDiv` above generates `div` html element with `click` event that prop an alert message.
```html
My awesome div
```
## Documentation
element-creator contains **Elementextended** (or wrapper) which wraps/adds interactive functions such as **.find**, **.all** to standard element and **ElementCreator** which creates HTML elements then wrap and return an ElementExtended element.
### ElementCreator
```javascript
// vdom return new element
var vdom = e(elementString, children, options)
```
Where:
- **elementString** is a string that specify the element parameters creation with following pattern:
`{elementType}{(*)elementId}{(*)elementClasses}{(*)elementAttributes}`
(*) is optional
| Parameters | Default | Description | Example |
|-------------------|---------|---------------------------------------|---------|
| elementType | div | Type of element or element's tag type | `p` or `h1`. Use default incase left empty |
| elementId | | Element's id | `#firstParagraph` |
| elementClasses | | Element classes | `.class__1` or multiple classes `.class__1.class_2` |
| elementAtrributes | | Element attributes | `[name=title]` or multiple attributes `[name=title,ref=titleRef]`|
- **children** is text node or html elements that stay inside the element.
- **options** os other configuration including:
- on: add event listener
- attrs: element's attributes
- data: element's data
### ElementExtended
```javascript
// wrappedElement return a html element within the html body with more interactive functions
var wrappedElement = e.wrap(querySelector, isMultiple)
```
Where:
- **querySelector** is standard query selector string for example `h1` will look for heading `h1`, `.class__1` will look for any element has class `.class__1`.
- **isMultiple** is `false` by default. If set to `true` it will return an array of element match with querySelector.