A Front-end library for creating dynamic html elements on the fly. Its makes it easy to create dynamic elements coupled with data(e.g, data coming from the database).
npm install compify --save
You can also check it out on NPM
var compify = require("compify");
// extract component constructor
var Component = compify.Component;
// creating a paragraph tag on the fly
var paragraph = new Component({
type: "p",
innerText: "Hey Compify",
style: {
"background-color": "#bbb",
"padding": "24px",
"color": "white"
}
})
The Component constructor takes one argument which is an object. For now, the object only takes 3 properties:
- type - this is the type of element you want to create
- innerText - this is the innerHTML of the created element
- style - this is an object that contains the styles to be applied to the created element. PS: the properties and property values should all be in double quotes
Now that we have instantiated the component, the component will be automatically generated; but the element wont be visible in the html file until we append it to an existing element in the html.
paragraph.append(document.body);
The append() method appends the created element to the specified element in the argument PS: this takes only one element