CreateElement

A short simple way to render my html through JavaScript without using one of the heavy guns.

Mini Doc

Installation via npm

Install it globally or locally

npm i -g c-element
npm i --save c-element

index.html

<div id=app>CreateElement not working</div>
<script src="index.js"></script>

index.js

import { Element, render } from "c-element";

Installation nodejs

index.js

const { Element, render } = require("c-element");

Use

index.js

/*
* To create element
*/
//new Element(string name, Object attributes, ...children)
const row = new Element(
  "p",
  {
    class: "text",
    id: "paragraph",
    style: "color: red"
  },
  "This is the paragraph"
);

//add event to the element
row.addEvent({
  dblclick: function() {
    console.log("double click");
  },
  mouseover: function() {
    console.log("hover");
  }
});

const button = new Element(
  "button",
  {
    //you may add event inside the attribute
    onClick: "alert('button clicked')" 
  },
  "Click"
);

//adding children to the element
row.addChildren(button, " hello");

const div = new Element(
  "div",
  {
    class: "sample",
    id: "target"
  },
  row
);

//rendering it into html
render(document.getElementById("app"), div);

This produces

<div id="app">
  <div class="sample" id="target">
    <p class="text" id="paragraph" style="color: red">
      This is the paragraph
      <button onclick="alert('button clicked')">Click</button>
      hello
    </p>
  </div>
</div>

Note, it also allows nesting

const form = new Element(
  "form",
  {
    class: "form group",
    action: "login.asp",
    method: "post"
  },
  new Element(
    "label",
    {
      for: "username"
    },
    "Username"
  ),
  new Element("input", {
    type: "text",
    id: "username"
  }),
  new Element(
    "label",
    {
      for: "password"
    },
    "Password"
  ),
  new Element("input", {
    type: "password",
    id: "password"
  })
);

render(document.getElementById("app"), form);

This produces

<form class="form group" action="login.asp" method="post">
  <label for="username">Username</label>
  <input type="text" id="username"></input>
  <label for="password">Password</label>
  <input type="password" id="password"></input>
</form>