simple-html-renderer

HTML renderer

how to use

to install the package you can use npm to install

npm install simple-html-renderer

or download directly from github

git clone https://github.com/MIchael-Kik/html-renderer.git

using package

to use the package create a new js file

touch index.js

then import the package

import {Element} from "./simple-html-renderer";

start creating your page

each element is represented by an instance of the Element class. The class accepts three arguments

1. type - type refers to the tag type ie. p , div, input ,form , button
2. args - args is an object that contains attribues and the innerHTML for the tag - the key is the atribute's name and the value is used as the value of the atribute. if there are no atributes leave an empty object
3. children - refers to an array of Element instances if there are no children leave an empty array

import {Element} from "./simple-html-renderer";


const root = new Element("div" , {
    id: "root",
    innerHTML: "Hello"
} , [
    new Element("p" , {
        innerHTML: "world"
    }, [])
])

then on the root element call the render method and save it to a variable

const renderedPage = root.render();

the output should be a DOM element that can be directly appended to the page

document.body.appendChild(renderedPage)