__  __            _                      _             
 |  \/  |          | |                    | |            
 | \  / | __ _ _ __| | ___   _ _ __   __ _| |_ ___  _ __ 
 | |\/| |/ _` | '__| |/ / | | | '_ \ / _` | __/ _ \| '__|
 | |  | | (_| | |  |   <| |_| | |_) | (_| | || (_) | |   
 |_|  |_|\__,_|_|  |_|\_\\__,_| .__/ \__,_|\__\___/|_|   
                              | |                        
                              |_|                         

Markupator

Library that mimics React's functions for creating HTML elements and attaching them to the page.

Rquirements

Node version 14.

Installation

Install it via NPM by using the following command:

npm install markupator --save-dev

Usage

Import the functions you need like so:

import { createElement, render } from 'markupator';

Creating HTML elements

createElement let's you quickly create an HTML element:

const element = createElement(tag, attribs, ...children);

Parameters

• type [required]: The type argument must be a valid HTML tag type. For example, it could be a tag name string (such as 'div' or 'span').
• attribs [required]: The attribs argument must either be an object or null. If you pass null, it will be treated the same as an empty object.
• ...children [optional]: Zero or more child nodes. They can be any HTML nodes, including text and arrays of objects.

Examples

To create the following markup:

<h1 class="title" area-label="title">Hello World</h1>

you would type: createElement('h1', { class: 'title', areaLabel: 'title', 'Hello World');

Attaching HTML elements

render appends elements created via createElement function into a browser DOM node.

render(domNode, domNode)

Parameters

• domNode - newly created element/s [required]: First argument is the newly created element or elements you with to add to your DOM.
• domNode - target [required]: This is existing HTML element you wish to append your newly created elements to.

Examples

Create new element, define an existing target element and append to it:

const element = createElement('h1', null, 'Hi');
const target = document.querySelector('.header');

render(element, target);

From

<header class="header"></header>

To

<header class="header><h1>Hi</h1></header>