domelemjs 1.0.0

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package/DOMElem.js

@@ -0,0 +1,120 @@
+export const Elem = {
+  noSpecChars: function (text, lowercase = false) {
+    function replaceAll(string, search, replace) {
+      return string.split(search).join(replace);
+    }
+
+    let specialChars = {
+      é: "e",
+      á: "a",
+      ó: "o",
+      ö: "o",
+      ő: "o",
+      ú: "u",
+      ü: "u",
+      ű: "u",
+      í: "i",
+      É: "E",
+      Á: "A",
+      Ó: "O",
+      Ö: "O",
+      Ő: "O",
+      Ú: "U",
+      Ü: "U",
+      Ű: "U",
+      Í: "I",
+      " ": "-",
+      "/": "-",
+      ":": "-",
+      ";": "-",
+      "=": "-",
+    };
+    for (let char in specialChars) {
+      text = replaceAll(text, char, specialChars[char]);
+    }
+    return lowercase ? text.toLowerCase() : text;
+  },
+
+  Create: function (parameters) {
+    let tag = parameters.tag || "div";
+    let attributes = parameters.attributes || {};
+    let children = parameters.children || [];
+    let eventStarter = parameters.eventStarter || null;
+    let eventFunction = parameters.eventFunction || null;
+    let content = parameters.content || null;
+    let text = parameters.text || null;
+    let style = parameters.style || null;
+
+    let targetParent =
+      typeof parameters.targetParent == "string"
+        ? document.querySelector(parameters.targetParent) ||
+          document.getElementById(parameters.targetParent)
+        : typeof parameters.targetParent == "object"
+        ? parameters.targetParent
+        : null;
+
+    let elem = document.createElement(tag);
+
+    for (let attr in attributes) {
+      elem.setAttribute(
+        attr,
+        attr == "class" || attr == "id"
+          ? this.noSpecChars(attributes[attr])
+          : attributes[attr]
+      );
+    }
+
+    /*
+     * Adding stye is possible as:
+     * * a string, with a bunch of style properties, it can be:
+     * * * CCS style (e.g. background-color) or
+     * * * JS/camelCase (e.g. backgroundColor) style formatted version also.
+     * * or an object formatted (e.g. style: { backgroundColor: red })
+     * * or an array with multiple style strings with CSS or JS vesrion, or mixed
+     */
+
+    if (style) {
+      let styleText;
+      if (typeof style === "string") {
+        styleText = style;
+      } else if (Array.isArray(style)) {
+        styleText = style.join("; ");
+      } else if (typeof style === "object") {
+        styleText = [];
+        for (let s in style) {
+          styleText.push(`${s}: ${style[s]}`);
+        }
+        styleText = styleText.join("; ");
+        console.log(styleText);
+      }
+
+      styleText.split(";").forEach((styleText) => {
+        let [s, p] = styleText.split(":").map((c) => c.trim());
+        s = s
+          .split("-")
+          .map((ss, i) => {
+            return i > 0 ? ss.charAt(0).toUpperCase() + ss.slice(1) : ss;
+          })
+          .join("");
+        elem.style[s] = p;
+      });
+    }
+
+    children.map((child) => {
+      typeof child != "object"
+        ? (child = document.createTextNode(child))
+        : null;
+      elem.appendChild(child);
+    });
+
+    if (content) elem.innerHTML = content;
+    if (text) elem.textContent = text;
+
+    if (eventStarter && eventFunction)
+      elem.addEventListener(eventStarter, eventFunction);
+
+    if (targetParent) targetParent.appendChild(elem);
+
+    return elem;
+  },
+};

package/DOMElem.min.js

@@ -0,0 +1,2 @@
+export const Elem={noSpecChars:function(text,lowercase=!1){function replaceAll(string,search,replace){return string.split(search).join(replace)}let specialChars={"é":"e","á":"a","ó":"o","ö":"o","ő":"o","ú":"u","ü":"u","ű":"u","í":"i","É":"E","Á":"A","Ó":"O","Ö":"O","Ő":"O","Ú":"U","Ü":"U","Ű":"U","Í":"I"," ":"-","/":"-",":":"-",";":"-","=":"-"};for(let char in specialChars)text=replaceAll(text,char,specialChars[char]);return lowercase?text.toLowerCase():text},Create:function(parameters){let tag=parameters.tag||"div",attributes=parameters.attributes||{},children=parameters.children||[],eventStarter=parameters.eventStarter||null,eventFunction=parameters.eventFunction||null,content=parameters.content||null,text=parameters.text||null,style=parameters.style||null,targetParent="string"==typeof parameters.targetParent?document.querySelector(parameters.targetParent)||document.getElementById(parameters.targetParent):"object"==typeof parameters.targetParent?parameters.targetParent:null,elem=document.createElement(tag);for(let attr in attributes)elem.setAttribute(attr,"class"==attr||"id"==attr?this.noSpecChars(attributes[attr]):attributes[attr]);if(style){let styleText;if("string"==typeof style)styleText=style;else if(Array.isArray(style))styleText=style.join("; ");else if("object"==typeof style){styleText=[];for(let s in style)styleText.push(`${s}: ${style[s]}`);styleText=styleText.join("; "),console.log(styleText)}styleText.split(";").forEach(styleText=>{let[s,p]=styleText.split(":").map(c=>c.trim());s=s.split("-").map((ss,i)=>i>0?ss.charAt(0).toUpperCase()+ss.slice(1):ss).join(""),elem.style[s]=p})}return children.map(child=>{"object"!=typeof child&&(child=document.createTextNode(child)),elem.appendChild(child)}),content&&(elem.innerHTML=content),text&&(elem.textContent=text),eventStarter&&eventFunction&&elem.addEventListener(eventStarter,eventFunction),targetParent&&targetParent.appendChild(elem),elem}};
+//# sourceMappingURL=DOMElem.min.js.map

package/DOMElem.min.js.map

@@ -0,0 +1,87 @@
+{
+    "version": 3,
+    "sources": [
+        "DOMElem.js"
+    ],
+    "names": [
+        "Elem",
+        "noSpecChars",
+        "text",
+        "lowercase",
+        "replaceAll",
+        "string",
+        "search",
+        "replace",
+        "split",
+        "join",
+        "specialChars",
+        "é",
+        "á",
+        "ó",
+        "ö",
+        "ő",
+        "ú",
+        "ü",
+        "ű",
+        "í",
+        "É",
+        "Á",
+        "Ó",
+        "Ö",
+        "Ő",
+        "Ú",
+        "Ü",
+        "Ű",
+        "Í",
+        " ",
+        "/",
+        ":",
+        ";",
+        "=",
+        "char",
+        "toLowerCase",
+        "Create",
+        "parameters",
+        "tag",
+        "attributes",
+        "children",
+        "eventStarter",
+        "eventFunction",
+        "content",
+        "style",
+        "targetParent",
+        "document",
+        "querySelector",
+        "getElementById",
+        "elem",
+        "createElement",
+        "attr",
+        "setAttribute",
+        "this",
+        "styleText",
+        "Array",
+        "isArray",
+        "s",
+        "push",
+        "console",
+        "log",
+        "forEach",
+        "p",
+        "map",
+        "c",
+        "trim",
+        "ss",
+        "i",
+        "charAt",
+        "toUpperCase",
+        "slice",
+        "child",
+        "createTextNode",
+        "appendChild",
+        "innerHTML",
+        "textContent",
+        "addEventListener"
+    ],
+    "mappings": "OAAO,MAAMA,KAAO,CAClBC,YAAa,SAAUC,KAAMC,WAAY,GACvC,SAASC,WAAWC,OAAQC,OAAQC,SAClC,OAAOF,OAAOG,MAAMF,QAAQG,KAAKF,SAGnC,IAAIG,aAAe,CACjBC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAG,IACHC,IAAK,IACLC,IAAK,IACLC,IAAK,IACLC,IAAK,IACLC,IAAK,KAEP,IAAK,IAAIC,QAAQxB,aACfR,KAAOE,WAAWF,KAAMgC,KAAMxB,aAAawB,OAE7C,OAAO/B,UAAYD,KAAKiC,cAAgBjC,MAG1CkC,OAAQ,SAAUC,YAChB,IAAIC,IAAMD,WAAWC,KAAO,MACxBC,WAAaF,WAAWE,YAAc,GACtCC,SAAWH,WAAWG,UAAY,GAClCC,aAAeJ,WAAWI,cAAgB,KAC1CC,cAAgBL,WAAWK,eAAiB,KAC5CC,QAAUN,WAAWM,SAAW,KAChCzC,KAAOmC,WAAWnC,MAAQ,KAC1B0C,MAAQP,WAAWO,OAAS,KAE5BC,aACgC,iBAA3BR,WAAWQ,aACdC,SAASC,cAAcV,WAAWQ,eAClCC,SAASE,eAAeX,WAAWQ,cACD,iBAA3BR,WAAWQ,aAClBR,WAAWQ,aACX,KAEFI,KAAOH,SAASI,cAAcZ,KAElC,IAAK,IAAIa,QAAQZ,WACfU,KAAKG,aACHD,KACQ,SAARA,MAA2B,MAARA,KACfE,KAAKpD,YAAYsC,WAAWY,OAC5BZ,WAAWY,OAanB,GAAIP,MAAO,CACT,IAAIU,UACJ,GAAqB,iBAAVV,MACTU,UAAYV,WACP,GAAIW,MAAMC,QAAQZ,OACvBU,UAAYV,MAAMnC,KAAK,WAClB,GAAqB,iBAAVmC,MAAoB,CACpCU,UAAY,GACZ,IAAK,IAAIG,KAAKb,MACZU,UAAUI,KAAK,GAAGD,MAAMb,MAAMa,MAEhCH,UAAYA,UAAU7C,KAAK,MAC3BkD,QAAQC,IAAIN,WAGdA,UAAU9C,MAAM,KAAKqD,QAASP,YAC5B,IAAKG,EAAGK,GAAKR,UAAU9C,MAAM,KAAKuD,IAAKC,GAAMA,EAAEC,QAC/CR,EAAIA,EACDjD,MAAM,KACNuD,IAAI,CAACG,GAAIC,IACDA,EAAI,EAAID,GAAGE,OAAO,GAAGC,cAAgBH,GAAGI,MAAM,GAAKJ,IAE3DzD,KAAK,IACRwC,KAAKL,MAAMa,GAAKK,IAmBpB,OAfAtB,SAASuB,IAAKQ,QACI,iBAATA,QACFA,MAAQzB,SAAS0B,eAAeD,QAErCtB,KAAKwB,YAAYF,SAGf5B,UAASM,KAAKyB,UAAY/B,SAC1BzC,OAAM+C,KAAK0B,YAAczE,MAEzBuC,cAAgBC,eAClBO,KAAK2B,iBAAiBnC,aAAcC,eAElCG,cAAcA,aAAa4B,YAAYxB,MAEpCA",
+    "file": "DOMElem.js"
+}

package/createDOMElem.js

@@ -0,0 +1,138 @@
+export function createElem({
+  tag,
+  content,
+  text,
+  attrs,
+  style,
+  children,
+  parent,
+  handleEvent,
+}) {
+  /*
+   * create the DOM element with the given tag
+   */
+  let elem = document.createElement(tag);
+
+  /*
+   *  add all the attributes they want
+   */
+  for (let attr in attrs) {
+    if (attr === "dataset") {
+      for (let data in attrs[attr]) {
+        elem.dataset[data] = attrs[attr][data];
+      }
+    } else {
+      if (Array.isArray(attrs[attr])) {
+        elem.setAttribute(attr, attrs[attr].join(" "));
+      } else {
+        elem.setAttribute(attr, attrs[attr]);
+      }
+    }
+  }
+
+  /*
+   * Adding stye is possible as:
+   * * a string, with a bunch of style properties, it can be:
+   * * * CCS style (e.g. background-color) or
+   * * * JS/camelCase (e.g. backgroundColor) style formatted version also.
+   * * or an object formatted (e.g. style: { backgroundColor: red })
+   * * or an array with multiple style strings with CSS or JS vesrion, or mixed
+   */
+
+  if (style) {
+    let styleText;
+    if (typeof style === "string") {
+      styleText = style;
+    } else if (Array.isArray(style)) {
+      styleText = style.join("; ");
+    } else if (typeof style === "object") {
+      styleText = [];
+      for (let s in style) {
+        styleText.push(`${s}: ${style[s]}`);
+      }
+      styleText = styleText.join("; ");
+      console.log(styleText);
+    }
+
+    styleText.split(";").forEach((styleText) => {
+      let [s, p] = styleText.split(":").map((c) => c.trim());
+      s = s
+        .split("-")
+        .map((ss, i) => {
+          return i > 0 ? ss.charAt(0).toUpperCase() + ss.slice(1) : ss;
+        })
+        .join("");
+      elem.style[s] = p;
+    });
+  }
+
+  if (children) {
+    let childrenArray = [];
+    if (!Array.isArray(children)) {
+      childrenArray.push(children);
+    } else {
+      childrenArray = children;
+    }
+    childrenArray.forEach((child) => {
+      child.parent = elem;
+      createElem(child);
+    });
+  }
+
+  /*
+   * Add the eventListener or more eventListeners it hey comes in array
+   */
+  let eventsToAdd = [];
+  /*
+   * Handle event is an object or an array of object, that schould be conain:
+   * event, what will fire the event?
+   * and a cb, that is the callback function
+   */
+  if (handleEvent) {
+    if (Array.isArray(handleEvent)) {
+      eventsToAdd = [...handleEvent];
+    } else {
+      eventsToAdd.push(handleEvent);
+    }
+    eventsToAdd.forEach((newEvent) => {
+      elem.addEventListener(newEvent.event, newEvent.cb);
+    });
+  }
+
+  /*
+   * add the content
+   */
+  content && (elem.innerHTML = content);
+  /*
+   * add the text
+   */
+  text && (elem.textContent = text);
+
+  /*
+  * Append the created elem to the parent what is given, or add to the body of the Document if not given.
+
+  * The parent:
+    * can be a DOM element, or
+    * a String of:
+        * ID or
+        * CLass
+  */
+  if (parent) {
+    if (typeof parent === "string") {
+      parent = [".", "#"]
+        .map((prep) => {
+          return document.querySelector(prep + parent);
+        })
+        .filter((pe) => {
+          return pe !== null;
+        })[0];
+    }
+  } else parent = document.querySelector("body");
+
+  parent.appendChild(elem);
+
+  /*
+   * and at the end give the elem back for later usage
+   */
+  return elem;
+}

package/createDOMElem.min.js

@@ -0,0 +1,2 @@
+export function createElem({tag:tag,content:content,text:text,attrs:attrs,style:style,children:children,parent:parent,handleEvent:handleEvent}){let elem=document.createElement(tag);for(let attr in attrs)if("dataset"===attr)for(let data in attrs[attr])elem.dataset[data]=attrs[attr][data];else Array.isArray(attrs[attr])?elem.setAttribute(attr,attrs[attr].join(" ")):elem.setAttribute(attr,attrs[attr]);if(style){let styleText;if("string"==typeof style)styleText=style;else if(Array.isArray(style))styleText=style.join("; ");else if("object"==typeof style){styleText=[];for(let s in style)styleText.push(`${s}: ${style[s]}`);styleText=styleText.join("; "),console.log(styleText)}styleText.split(";").forEach(styleText=>{let[s,p]=styleText.split(":").map(c=>c.trim());s=s.split("-").map((ss,i)=>i>0?ss.charAt(0).toUpperCase()+ss.slice(1):ss).join(""),elem.style[s]=p})}if(children){let childrenArray=[];Array.isArray(children)?childrenArray=children:childrenArray.push(children),childrenArray.forEach(child=>{child.parent=elem,createElem(child)})}let eventsToAdd=[];return handleEvent&&(Array.isArray(handleEvent)?eventsToAdd=[...handleEvent]:eventsToAdd.push(handleEvent),eventsToAdd.forEach(newEvent=>{elem.addEventListener(newEvent.event,newEvent.cb)})),content&&(elem.innerHTML=content),text&&(elem.textContent=text),parent?"string"==typeof parent&&(parent=[".","#"].map(prep=>document.querySelector(prep+parent)).filter(pe=>null!==pe)[0]):parent=document.querySelector("body"),parent.appendChild(elem),elem}
+//# sourceMappingURL=createDOMElem.min.js.map

package/createDOMElem.min.js.map

@@ -0,0 +1,59 @@
+{
+    "version": 3,
+    "sources": [
+        "createDOMElem.js"
+    ],
+    "names": [
+        "createElem",
+        "tag",
+        "content",
+        "text",
+        "attrs",
+        "style",
+        "children",
+        "parent",
+        "handleEvent",
+        "elem",
+        "document",
+        "createElement",
+        "attr",
+        "data",
+        "dataset",
+        "Array",
+        "isArray",
+        "setAttribute",
+        "join",
+        "styleText",
+        "s",
+        "push",
+        "console",
+        "log",
+        "split",
+        "forEach",
+        "p",
+        "map",
+        "c",
+        "trim",
+        "ss",
+        "i",
+        "charAt",
+        "toUpperCase",
+        "slice",
+        "childrenArray",
+        "child",
+        "eventsToAdd",
+        "newEvent",
+        "addEventListener",
+        "event",
+        "cb",
+        "innerHTML",
+        "textContent",
+        "prep",
+        "querySelector",
+        "filter",
+        "pe",
+        "appendChild"
+    ],
+    "mappings": "OAAO,SAASA,YAAWC,IACzBA,IAAGC,QACHA,QAAOC,KACPA,KAAIC,MACJA,MAAKC,MACLA,MAAKC,SACLA,SAAQC,OACRA,OAAMC,YACNA,cAKA,IAAIC,KAAOC,SAASC,cAAcV,KAKlC,IAAK,IAAIW,QAAQR,MACf,GAAa,YAATQ,KACF,IAAK,IAAIC,QAAQT,MAAMQ,MACrBH,KAAKK,QAAQD,MAAQT,MAAMQ,MAAMC,WAG/BE,MAAMC,QAAQZ,MAAMQ,OACtBH,KAAKQ,aAAaL,KAAMR,MAAMQ,MAAMM,KAAK,MAEzCT,KAAKQ,aAAaL,KAAMR,MAAMQ,OAcpC,GAAIP,MAAO,CACT,IAAIc,UACJ,GAAqB,iBAAVd,MACTc,UAAYd,WACP,GAAIU,MAAMC,QAAQX,OACvBc,UAAYd,MAAMa,KAAK,WAClB,GAAqB,iBAAVb,MAAoB,CACpCc,UAAY,GACZ,IAAK,IAAIC,KAAKf,MACZc,UAAUE,KAAK,GAAGD,MAAMf,MAAMe,MAEhCD,UAAYA,UAAUD,KAAK,MAC3BI,QAAQC,IAAIJ,WAGdA,UAAUK,MAAM,KAAKC,QAASN,YAC5B,IAAKC,EAAGM,GAAKP,UAAUK,MAAM,KAAKG,IAAKC,GAAMA,EAAEC,QAC/CT,EAAIA,EACDI,MAAM,KACNG,IAAI,CAACG,GAAIC,IACDA,EAAI,EAAID,GAAGE,OAAO,GAAGC,cAAgBH,GAAGI,MAAM,GAAKJ,IAE3DZ,KAAK,IACRT,KAAKJ,MAAMe,GAAKM,IAIpB,GAAIpB,SAAU,CACZ,IAAI6B,cAAgB,GACfpB,MAAMC,QAAQV,UAGjB6B,cAAgB7B,SAFhB6B,cAAcd,KAAKf,UAIrB6B,cAAcV,QAASW,QACrBA,MAAM7B,OAASE,KACfT,WAAWoC,SAOf,IAAIC,YAAc,GAoDlB,OA9CI7B,cACEO,MAAMC,QAAQR,aAChB6B,YAAc,IAAI7B,aAElB6B,YAAYhB,KAAKb,aAEnB6B,YAAYZ,QAASa,WACnB7B,KAAK8B,iBAAiBD,SAASE,MAAOF,SAASG,OAOnDvC,UAAYO,KAAKiC,UAAYxC,SAI7BC,OAASM,KAAKkC,YAAcxC,MAWxBI,OACoB,iBAAXA,SACTA,OAAS,CAAC,IAAK,KACZoB,IAAKiB,MACGlC,SAASmC,cAAcD,KAAOrC,SAEtCuC,OAAQC,IACO,OAAPA,IACN,IAEFxC,OAASG,SAASmC,cAAc,QAEvCtC,OAAOyC,YAAYvC,MAKZA",
+    "file": "createDOMElem.js"
+}

package/createElem.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <script src="elem-func.js"></script>
+    <script>
+      const app = createElem({
+        tag: "div",
+        attrs: { id: "app" },
+      });
+
+      /* styling is easy */
+      createElem({
+        tag: "h1",
+        text: "Hello World!",
+        parent: app,
+        style: "color: red; background-color: green",
+        attrs: { id: "title" },
+      });
+      createElem({
+        tag: "h2",
+        text: "It's amazing",
+        parent: app,
+        style: { color: "red", "background-color": "green" },
+        attrs: { id: "title" },
+      });
+      createElem({
+        tag: "h3",
+        text: "I can write style as I want to",
+        parent: app,
+        style: ["color: red", "background-color: green"],
+        attrs: { id: "title" },
+      });
+
+      /* creating a select with 2 options and eventHandler */
+      const select = createElem({
+        tag: "select",
+        parent: app,
+        attrs: { id: "selector" },
+        children: [
+          {
+            tag: "option",
+            content: "foo",
+            attr: { value: "foo" },
+          },
+          {
+            tag: "option",
+            content: "bar",
+            attr: { value: "bar" },
+          },
+        ],
+        handleEvent: {
+          event: "change",
+          cb: (e) => console.log(e.target.value),
+        },
+      });
+    </script>
+  </body>
+</html>

package/elem.html

@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <script src="elem-object.js"></script>
+    <script>
+      /* használata */
+
+      let myDOM = {};
+
+      /* 1. Úgy is haszálhatom, hogy változóba hozom létre, és azt appendolom külön */
+
+      myDOM.selectControlContainer = Elem.Create({
+        tag: "div",
+        attrs: { class: "első próbálkozás" },
+      });
+
+      document.body.appendChild(myDOM.selectControlContainer);
+
+      /* 2. Úgy is használhatom, hogy a szülőelemet már az Elem létrehozásakor megadom neki, és akkor befűzi oda. */
+
+      function generateOption(options) {
+        let optionElems = [];
+        options.forEach(function (option) {
+          let optionElem = Elem.Create({
+            tag: "option",
+            content: option,
+          });
+          optionElems.push(optionElem);
+        });
+        return optionElems;
+      }
+
+      let animals = ["Maci", "Nyuszi", "Cica", "Kutya"];
+      let animalOption = generateOption(animals);
+
+      myDOM.selectControl = Elem.Create({
+        tag: "select",
+        attrs: { id: "selectControl" },
+        style: { color: "red" },
+        targetParent: myDOM.selectControlContainer,
+        children: animalOption,
+      });
+
+      myDOM.selectControl = Elem.Create({
+        tag: "label",
+        attrs: { for: "selectControl" },
+        targetParent: myDOM.selectControlContainer,
+      });
+
+      /* 3. Úgy is haszálhatom, hogy egyből appendolom és azt változónak adom */
+
+      let plants = ["Fenyő", "Juhar", "Cédrus", "Mahagóni"];
+
+      myDOM.selectControl = myDOM.selectControl.appendChild(
+        Elem.Create({
+          tag: "select",
+          attrs: { id: "selectControl" },
+          targetParent: myDOM.selectControlContainer,
+          children: generateOption(plants),
+        })
+      );
+
+      myDOM.selectControl = myDOM.selectControl.appendChild(
+        Elem.Create({
+          tag: "label",
+          attrs: { for: "selectControl" },
+          targetParent: myDOM.selectControlContainer,
+        })
+      );
+
+      /* Példa egy komplexebb struktúra előállítására */
+
+      myDOM.dateFilterContainer = document.body.appendChild(
+        Elem.Create({
+          tag: "div",
+          attrs: { class: "dateFilter-Container", id: "dateFilter-Container" },
+          children: [
+            Elem.Create({
+              tag: "div",
+              attrs: {
+                class: "beginDate-container",
+                id: "beginDate-container",
+              },
+              children: [
+                Elem.Create({
+                  tag: "label",
+                  attrs: {
+                    class: "beginDate-lable",
+                  },
+                  content: "Kezdő dátum: ",
+                }),
+                Elem.Create({
+                  tag: "input",
+                  attrs: {
+                    type: "date",
+                    class: "beginDate",
+                    id: "beginDate",
+                  },
+                  eventStarter: "change",
+                  eventFunction: function (e) {
+                    e.preventDefault();
+                    console.log(this.value);
+                  },
+                }),
+              ],
+            }),
+            Elem.Create({
+              tag: "div",
+              attrs: { class: "endDate-container", id: "endDate-container" },
+              children: [
+                Elem.Create({
+                  tag: "label",
+                  attrs: {
+                    class: "endDate-lable",
+                  },
+                  content: "Befejező dátum: ",
+                }),
+                Elem.Create({
+                  tag: "input",
+                  attrs: {
+                    type: "date",
+                    class: "endDate",
+                    id: "endDate",
+                  },
+                  eventStarter: "change",
+                  eventFunction: function (e) {
+                    e.preventDefault();
+                    console.log(this.value);
+                  },
+                }),
+              ],
+            }),
+          ],
+        })
+      );
+    </script>
+  </body>
+</html>

package/index.js

@@ -0,0 +1,7 @@
+import { createDOMElem } from "./createDOMElem";
+import { DOMElem } from "./DOMElem";
+
+module.exports = {
+  createDOMElem,
+  DOMElem,
+};

package/index.min.js

@@ -0,0 +1,2 @@
+import{createDOMElem}from"./createDOMElem";import{DOMElem}from"./DOMElem";module.exports={createDOMElem:createDOMElem,DOMElem:DOMElem};
+//# sourceMappingURL=index.min.js.map

package/index.min.js.map

@@ -0,0 +1,14 @@
+{
+    "version": 3,
+    "sources": [
+        "index.js"
+    ],
+    "names": [
+        "createDOMElem",
+        "DOMElem",
+        "module",
+        "exports"
+    ],
+    "mappings": "OAASA,kBAAqB,yBACrBC,YAAe,YAExBC,OAAOC,QAAU,CACfH,cAAAA,cACAC,QAAAA",
+    "file": "index.js"
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "domelemjs",
+  "version": "1.0.0",
+  "description": "With the help of this package the rendering of HTML elements form JavaScript become a easy job.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/exphoenee/DOMelemJS"
+  },
+  "keywords": [
+    "rendering",
+    "DOM",
+    "dynamic",
+    "webapp"
+  ],
+  "author": "VIKTOR, Bozzay",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/exphoenee/DOMelemJS/issues"
+  },
+  "homepage": "https://github.com/exphoenee/DOMelemJS#readme"
+}