@tbtk-site/tbtk-create-element

What is this?

If you do not use a framework, you may want to use "document.createElement" to construct an element, but using it normally requires a large number of temporary variables, which is redundant and cumbersome.

This library allows you to assemble elements using an arrow function expression without using temporary variables. This library is lightweight, so it can be stored anywhere.

install

# npm
npm install @tbtk-site/tbtk-create-element

# yarn
yarn add @tbtk-site/tbtk-create-element

Using jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/@tbtk-site/tbtk-create-element/dist/index.min.js"></script>

RunKit Demo

https://runkit.com/tbtk-site/62e7ccc61817e30008e1b8e8

How to use

Example of creating a simple 1-element

// Before
let p = document.createElement("p");
p.innerText = "hogehoge";
document.body.appendChild(p);

// After(CDN & Web Browser)
createElement(document.body, "p", (p) => p.ref.innerText = "hogehoge");

// After(Node & TypeScript)
import { createElement } from "@tbtk-site/tbtk-create-element";
createElement(document.body, "p", (p) => p.ref.innerText = "hogehoge");

Example of creating a table

// before
let table = document.createElement("table");
let thead = document.createElement("thead");
let tbody = document.createElement("tbody");
let headerTr = document.createElement("tr");
let headerTh1 = document.createElement("th");
headerTh1.innerHTML = "header 1";
headerTr.appendChild(headerTh1);
let headerTh2 = document.createElement("th");
headerTh2.innerHTML = "header 2";
headerTr.appendChild(headerTh2);
let headerTh3 = document.createElement("th");
headerTh3.innerHTML = "header 3";
headerTr.appendChild(headerTh3);
thead.appendChild(headerTr);

let bodyTr = document.createElement("tr");
let bodyTd1 = document.createElement("td");
bodyTd1.innerHTML = "col 1";
bodyTr.appendChild(bodyTd1);
let bodyTd2 = document.createElement("td");
bodyTd2.innerHTML = "col 2";
bodyTr.appendChild(bodyTd2);
let bodyTd3 = document.createElement("td");
bodyTd3.innerHTML = "col 3";
bodyTr.appendChild(bodyTd3);
tbody.appendChild(bodyTr);

table.appendChild(thead);
table.appendChild(tbody);
document.body.appendChild(table);

// after
createElement(document.body, "table")
  .child("thead", (thead) =>
    thead.child("tr", (tr) =>
          tr.child("th", (th) => (th.ref.innerHTML = "header 1"))
            .child("th", (th) => (th.ref.innerHTML = "header 2"))
            .child("th", (th) => (th.ref.innerHTML = "header 3"))
    )
  )
  .child("tbody", (tbody) =>
    tbody.child("tr", (tr) =>
          tr.child("td", (td) => (td.ref.innerHTML = "col 1"))
            .child("td", (td) => (td.ref.innerHTML = "col 2"))
            .child("td", (td) => (td.ref.innerHTML = "col 3"))
    )
  );

License

MIT