コロナでゴールデンウィーク中引きこもりだったのでJS内でHTML要素を作成するライブラリを作成しました。
せっかくなので公開して虚無のゴールデンウィークの供養としたいと思います！

なにかの刺激になれば幸いです

以下はreadme.mdです。

HtmlTs

概要

TypeScript製のHTML要素を作成を支援するライブラリです。
コードでHTMLを作成したい人向けのライブラリです。
一見jQueryみたいな感じで使えますが、必要ないメソッドは省略しています。(jQueryフリー)
decoratorを切り替えることによって様々なCSS Frameworkに対応できます。（デフォルトではプレーンなものです）
SampleとしてBootstrap4を実装しています。

使い方

<script src="./htmlts.js"></script>

destにあるJSファイルを読み込むだけです。

bootstrap4で使う場合は下記も追記してください。

<script src="./htmltsBootstrap4.js"></script>

module

htmlts - Coreライブラリです.
htmlts.table - テーブル作成系です。
htmlts.input - input系です。(validatorもついてます)

Module Sample

htmls

htmlts.create

下記の様にしてHTML要素を作成します。

// objには HtmlTs要素が返ります。HtmlTsオブジェクトがどんなメソッドを持っているかは後述します。
var obj = htmlts.create(`${TagName}`);

第二引数にはいろんなものをとることができます。簡単にHTML要素を作成できるようになっています。

// 空のdiv要素を作成
var div = htmlts.create("div");

// テキストを指定しながらP要素を作成
var p = htmlts.create("p", "なにかのテキスト");

// 中身に色々指定しながらdiv要素を作成
var div2 = htmlts.create("div", {
  class: "some class to add", // 要素に追加したいclass。 string | string[]
  // Attributeも設定できます。jQueryのattrをまとめて設定する感じです。
  attr: {
    "id": "id_div",
    "title": "Title属性です",
  },
  // cssも設定できます。jQueryのcssをまとめて設定する感じです。
  css: {
    "height": "5rem",
    "width": "10rem",
  },
  // 要素に追加したい中身
  content: [
    123, // numberはspan要素でwrapされます
    "なにかの文字列", // numberはspan要素でwrapされます
        htmlts.create("p", ""), // HtmlTsオブジェクトもネストできます。この例ではdiv要素の下にp要素を追加します。
  ],
  click: (element) => {
    // 要素をクリックした時の動作もまとめて設定できます。
    console.log("clicked!");
    },
});

// もちろん設定したくない場合は空でも作成できます。
var div3 = htmlts.create("div", {});

第二引数をObjectで渡したときに使用できるパラメータ

param	type(型)	備考
class	string \	string[]
attr	{[key: string]: string}	適用したい属性
css	{[key: string]: string}	適用したいCSS
content	string \	number \
click	function(elemnt)	clickした時のfunction。第一引数にHtmlElementがきます。

それぞれのパラメータはなくても大丈夫です。

htmlts.createById

idを指定して既存のHtml要素をHtmlTsオブジェクト化します。作成したHtmlTs要素をHtmlに反映するときなどに使ってください。

var obj = htmlts.create("p", "こんにちは");
htmlts.createById("some_id").appen(
    obj
).append(
    htmlts.create("p", "HtmlTs!")
);

HtmlTsオブジェクト

持っているパラメータは下記です。

name	type	備考
parent	HtmlTs \	undefind
children	HtmlTs[]	appendで追加されたものが入ります。
htmlElement	Element	実際のhtmlElementです。 jQueryでいうところのget(0)でとれるやつです。

下記のメソッドが使えます。

method	引数	返り値	備考
append	HtmlTs \	HtmlTs[]	HtmlTs
prepend	HtmlTs \	HtmlTs[]	HtmlTs
empty		HtmlTs	子要素を削除します。 jQueryのappendと一緒でメソッドチェーンできます。
remove		HtmlTs	自身を削除します。 jQueryのremoveと一緒。
setText	string	HtmlTs	テキストノードを設定します。メソッドチェーンできます。
getText		string	テキストノードの中身を返します。
addClass	string \	string[]	HtmlTs
hasClass	string	boolean	指定したクラスを持っているかbooleanを返します。
removeClass	string \	string[]	HtmlTs
setCss	備考を参照	HtmlTs	cssを設定します。 jQueryのcss()と一緒で css(param, value)や css({param: vlue, ...})の様にかけます。メソッドチェーンできます。
setAttr	備考を参照	HtmlTs	属性を設定します。 jQueryのattr()と一緒で attr(param, value)や attr({param: vlue, ...})の様にかけます。メソッドチェーンできます。
setAttr	備考を参照	HtmlTs	指定したクラスを削除します。 jQueryのremoveClassと一緒でメソッドチェーンできます。
getAttr	string	string	指定した属性の値が返ります。
on	string \	string[], function	HtmlTs
click	string \	string[]	HtmlTs
change	string \	string[]	HtmlTs

htmlts.table

テーブルを簡単に作成するためのモジュールです。

// sample
var tableObj = htmlts.table.create({
    thead: ["No.", "名前", "趣味"],
    tbody: [
        ["1", "John", "walking"],
        ["2", "Mary", "running"],
        ["3", "Mike", "touring"]
  ]
});

htmlts.createById("id").append(tableObj);

みたいにやると下記の様なテーブルができます。

No.	名前	趣味
1	John	walking
2	Mary	running
3	Mike	touring

指定できるオプションは色々あるのでSampleを見てみてください。

htmlts.input

input要素の作成を簡単にするモジュールです。

値の一括取得、validateの実行などが主な機能です。

流れとしては

controllerを作成する
inputオブジェクトを作成する × N回
controllerに登録する
controllerで一括validate
必要であればcontrollerで一括して値を取得

という感じです。

// Sample

var inputController = htmlts.input.controller();

// input type=text な要素
var inputText = htmlts.input.text({
  name: "user_name", // inputのname属性
  value: "", // 初期値
  placeHolder: "ユーザー名を入力", // inputのplaceHoler属性
  validate: {
    isNotNull: true, // 入力必須項目にする。
    // 他にもvalidateの種類は色々あるのでサンプルやソースをみてください。
    // また外からカスタムなvalidateルールを入れることもできます。
    custom: [
      // customなルール。booleanを返してください
      test: (value) => {
            return value !== "よくないユーザー名";
        },
        message: "それはよくないです" // エラーだった時に表示されるメッセージ
    ]
  }
});

// コントローラーに登録
inputController.subscribe(inputText);

// validate
if (inputController.validate()) {
  // ok
  console.log(inputController.value());
}

作成できるinputのリストです。

type	return
hidden	string
text	string
textarea	string
checkbox	string[]
radio	string
selectOne	string
selectMulti	string[]
password	string

Decorator

自作するのは簡単だと思いますのでBootstrap4のsrcを見て実装してみてください。

今後なにかついかするかもしれません。

以上です。

おつかれさまでした

HtmlTs: TypeScript製のHtml要素作成ライブラリを作ってみました