domelemjs 1.1.0 → 1.1.3

package/README.md

@@ -87,12 +87,12 @@ const select = createDOMElem({
   children: [
     {
       tag: "option",
-      content: "foo",
+      text: "foo",
       attr: { value: "foo" },
     },
     {
       tag: "option",
-      content: "bar",
+      text: "bar",
       attr: { value: "bar" },
     },
   ],

package/index.js

@@ -1,121 +1,3 @@
-const noSpecChars = (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;
-};
-
-const DOMElem = {
-  Create: function (parameters) {
-    let tag = parameters.tag || "div";
-    let attrs = parameters.attrs || {};
-    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.getElementById(parameters.targetParent) ||
-          document.querySelector(parameters.targetParent)
-        : typeof parameters.targetParent == "object"
-        ? parameters.targetParent
-        : null;
-
-    let elem = document.createElement(tag);
-
-    if (content) elem.innerHTML = content;
-    if (text) elem.textContent = text;
-
-    for (let attr in attrs) {
-      elem.setAttribute(
-        attr,
-        attr == "class" || attr == "id" ? noSpecChars(attrs[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("; ");
-      }
-
-      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 (eventStarter && eventFunction)
-      elem.addEventListener(eventStarter, eventFunction);
-
-    if (targetParent) targetParent.appendChild(elem);
-
-    return elem;
-  },
-};
-
 const createDOMElem = ({
   tag,
   content,
@@ -140,36 +22,31 @@ const createDOMElem = ({
    */
   text && (elem.textContent = text);
 
-  function makeThatArray(arr) {
-    if (Array.isArray(arr)) {
-      return arr;
-    } else {
-      return [arr];
-    }
-  }
-
   /*
    *  add all the attributes they want
    */
 
-  Object.keys(attrs).forEach((attr) => {
-    if (attr === "checked") {
-      elem.checked = attrs[attr];
-    } else if (attr === "dataset") {
-      makeThatArray(attrs[attr]).map((data) =>
-        Object.keys(data).forEach((d) => (elem.dataset[d] = data[d]))
-      );
-    } else if (attr === "class" || attr === "id") {
-      elem.setAttribute(
-        attr,
-        makeThatArray(attrs[attr])
-          .map((a) => noSpecChars(a))
-          .join(" ")
-      );
-    } else {
-      elem.setAttribute(attr, makeThatArray(attrs[attr]).join(" "));
-    }
-  });
+  attrs &&
+    makeThatArray(attrs).forEach((atts) =>
+      Object.keys(atts).forEach((attr) => {
+        if (attr === "checked") {
+          elem.checked = atts[attr];
+        } else if (attr === "dataset") {
+          makeThatArray(atts[attr]).map((data) =>
+            Object.keys(data).forEach((d) => (elem.dataset[d] = data[d]))
+          );
+        } else if (attr === "class" || attr === "id") {
+          elem.setAttribute(
+            attr,
+            makeThatArray(atts[attr])
+              .map((a) => noSpecChars(a))
+              .join(" ")
+          );
+        } else {
+          elem.setAttribute(attr, makeThatArray(atts[attr]).join(" "));
+        }
+      })
+    );
 
   /*
    * Adding stye is possible as:
@@ -180,16 +57,7 @@ const createDOMElem = ({
    * * or an array with multiple style strings with CSS or JS vesrion, or mixed
    */
 
-  function makeCamelCase(s) {
-    return s
-      .split("-")
-      .map((ss, i) => {
-        return i > 0 ? ss.charAt(0).toUpperCase() + ss.slice(1) : ss;
-      })
-      .join("");
-  }
-
-  if (style) {
+  style &&
     makeThatArray(style)
       .map((styleElem) => {
         if (typeof styleElem === "object") {
@@ -206,15 +74,13 @@ const createDOMElem = ({
         let [styleTxt, val] = styleTxts.split(":").map((c) => c.trim());
         elem.style[makeCamelCase(styleTxt)] = val;
       });
-  }
 
-  if (children) {
+  children &&
     makeThatArray(children).map((child) => {
-      let childElem = child;
-      if (typeof child === "object") childElem = createDOMElem(child);
-      elem.appendChild(childElem);
+      elem.appendChild(
+        typeof child === "object" ? createDOMElem(child) : child
+      );
     });
-  }
 
   /*
    * Add the eventListener or more eventListeners it hey comes in array
@@ -222,11 +88,10 @@ const createDOMElem = ({
    * event, what will fire the event?
    * and a cb, that is the callback function
    */
-  if (handleEvent) {
+  handleEvent &&
     makeThatArray(handleEvent).forEach((newEvent) => {
       elem.addEventListener(newEvent.event, newEvent.cb);
     });
-  }
 
   /*
   * Append the created elem to the parent what is given, or add to the body of the Document if not given.
@@ -256,3 +121,68 @@ const createDOMElem = ({
    */
   return elem;
 };
+
+/* object caller of the funcion */
+const DOMElem = {
+  Create: createDOMElem,
+};
+
+/******************/
+/* HELPER METHODS */
+/******************/
+
+/* removing special chars form a string */
+const noSpecChars = (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;
+};
+
+/* check is it is array do nothing, if not maki it array */
+const makeThatArray = (arr) => {
+  if (Array.isArray(arr)) {
+    return arr;
+  } else {
+    return [arr];
+  }
+};
+
+/* removing the "-" symbol form the string adn makind the afterward word to uppercase, that is named as camelCase */
+function makeCamelCase(s) {
+  return s
+    .split("-")
+    .map((ss, i) => {
+      return i > 0 ? ss.charAt(0).toUpperCase() + ss.slice(1) : ss;
+    })
+    .join("");
+}

package/index.min.js

@@ -1,2 +1,2 @@
-const noSpecChars=(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},DOMElem={Create:function(parameters){let tag=parameters.tag||"div",attrs=parameters.attrs||{},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.getElementById(parameters.targetParent)||document.querySelector(parameters.targetParent):"object"==typeof parameters.targetParent?parameters.targetParent:null,elem=document.createElement(tag);content&&(elem.innerHTML=content),text&&(elem.textContent=text);for(let attr in attrs)elem.setAttribute(attr,"class"==attr||"id"==attr?noSpecChars(attrs[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("; ")}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)}),eventStarter&&eventFunction&&elem.addEventListener(eventStarter,eventFunction),targetParent&&targetParent.appendChild(elem),elem}},createDOMElem=({tag:tag,content:content,text:text,attrs:attrs,style:style,children:children,parent:parent,handleEvent:handleEvent})=>{let elem=document.createElement(tag);function makeThatArray(arr){return Array.isArray(arr)?arr:[arr]}function makeCamelCase(s){return s.split("-").map((ss,i)=>i>0?ss.charAt(0).toUpperCase()+ss.slice(1):ss).join("")}return content&&(elem.innerHTML=content),text&&(elem.textContent=text),Object.keys(attrs).forEach(attr=>{"checked"===attr?elem.checked=attrs[attr]:"dataset"===attr?makeThatArray(attrs[attr]).map(data=>Object.keys(data).forEach(d=>elem.dataset[d]=data[d])):"class"===attr||"id"===attr?elem.setAttribute(attr,makeThatArray(attrs[attr]).map(a=>noSpecChars(a)).join(" ")):elem.setAttribute(attr,makeThatArray(attrs[attr]).join(" "))}),style&&makeThatArray(style).map(styleElem=>"object"==typeof styleElem?Object.keys(styleElem).map(styleTxt=>`${styleTxt}: ${styleElem[styleTxt]}`).join("; "):makeThatArray(styleElem).join("; ")).join("; ").split(";").forEach(styleTxts=>{let[styleTxt,val]=styleTxts.split(":").map(c=>c.trim());elem.style[makeCamelCase(styleTxt)]=val}),children&&makeThatArray(children).map(child=>{let childElem=child;"object"==typeof child&&(childElem=createDOMElem(child)),elem.appendChild(childElem)}),handleEvent&&makeThatArray(handleEvent).forEach(newEvent=>{elem.addEventListener(newEvent.event,newEvent.cb)}),parent?"string"==typeof parent&&(parent=[".","#"].map(prep=>document.querySelector(prep+parent)).filter(pe=>null!==pe)[0]):parent=document.querySelector("body"),parent.appendChild(elem),elem};
+const createDOMElem=({tag:tag,content:content,text:text,attrs:attrs,style:style,children:children,parent:parent,handleEvent:handleEvent})=>{let elem=document.createElement(tag);return content&&(elem.innerHTML=content),text&&(elem.textContent=text),attrs&&makeThatArray(attrs).forEach(atts=>Object.keys(atts).forEach(attr=>{"checked"===attr?elem.checked=atts[attr]:"dataset"===attr?makeThatArray(atts[attr]).map(data=>Object.keys(data).forEach(d=>elem.dataset[d]=data[d])):"class"===attr||"id"===attr?elem.setAttribute(attr,makeThatArray(atts[attr]).map(a=>noSpecChars(a)).join(" ")):elem.setAttribute(attr,makeThatArray(atts[attr]).join(" "))})),style&&makeThatArray(style).map(styleElem=>"object"==typeof styleElem?Object.keys(styleElem).map(styleTxt=>`${styleTxt}: ${styleElem[styleTxt]}`).join("; "):makeThatArray(styleElem).join("; ")).join("; ").split(";").forEach(styleTxts=>{let[styleTxt,val]=styleTxts.split(":").map(c=>c.trim());elem.style[makeCamelCase(styleTxt)]=val}),children&&makeThatArray(children).map(child=>{elem.appendChild("object"==typeof child?createDOMElem(child):child)}),handleEvent&&makeThatArray(handleEvent).forEach(newEvent=>{elem.addEventListener(newEvent.event,newEvent.cb)}),parent?"string"==typeof parent&&(parent=[".","#"].map(prep=>document.querySelector(prep+parent)).filter(pe=>null!==pe)[0]):parent=document.querySelector("body"),parent.appendChild(elem),elem},DOMElem={Create:createDOMElem},noSpecChars=(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},makeThatArray=arr=>Array.isArray(arr)?arr:[arr];function makeCamelCase(s){return s.split("-").map((ss,i)=>i>0?ss.charAt(0).toUpperCase()+ss.slice(1):ss).join("")}
 //# sourceMappingURL=index.min.js.map

package/index.min.js.map

@@ -4,15 +4,60 @@
         "index.js"
     ],
     "names": [
-        "noSpecChars",
+        "createDOMElem",
+        "tag",
+        "content",
         "text",
+        "attrs",
+        "style",
+        "children",
+        "parent",
+        "handleEvent",
+        "elem",
+        "document",
+        "createElement",
+        "innerHTML",
+        "textContent",
+        "makeThatArray",
+        "forEach",
+        "atts",
+        "Object",
+        "keys",
+        "attr",
+        "checked",
+        "map",
+        "data",
+        "d",
+        "dataset",
+        "setAttribute",
+        "a",
+        "noSpecChars",
+        "join",
+        "styleElem",
+        "styleTxt",
+        "split",
+        "styleTxts",
+        "val",
+        "c",
+        "trim",
+        "makeCamelCase",
+        "child",
+        "appendChild",
+        "newEvent",
+        "addEventListener",
+        "event",
+        "cb",
+        "prep",
+        "querySelector",
+        "filter",
+        "pe",
+        "DOMElem",
+        "Create",
         "lowercase",
         "replaceAll",
         "string",
         "search",
         "replace",
-        "split",
-        "join",
         "specialChars",
         "é",
         "á",
@@ -39,70 +84,16 @@
         "=",
         "char",
         "toLowerCase",
-        "DOMElem",
-        "Create",
-        "parameters",
-        "tag",
-        "attrs",
-        "children",
-        "eventStarter",
-        "eventFunction",
-        "content",
-        "style",
-        "targetParent",
-        "document",
-        "getElementById",
-        "querySelector",
-        "elem",
-        "createElement",
-        "innerHTML",
-        "textContent",
-        "attr",
-        "setAttribute",
-        "styleText",
+        "arr",
         "Array",
         "isArray",
         "s",
-        "push",
-        "forEach",
-        "p",
-        "map",
-        "c",
-        "trim",
         "ss",
         "i",
         "charAt",
         "toUpperCase",
-        "slice",
-        "child",
-        "createTextNode",
-        "appendChild",
-        "addEventListener",
-        "createDOMElem",
-        "parent",
-        "handleEvent",
-        "makeThatArray",
-        "arr",
-        "makeCamelCase",
-        "Object",
-        "keys",
-        "checked",
-        "data",
-        "d",
-        "dataset",
-        "a",
-        "styleElem",
-        "styleTxt",
-        "styleTxts",
-        "val",
-        "childElem",
-        "newEvent",
-        "event",
-        "cb",
-        "prep",
-        "filter",
-        "pe"
+        "slice"
     ],
-    "mappings": "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",
+    "mappings": "AAAA,MAAMA,cAAgB,EACpBC,IAAAA,IACAC,QAAAA,QACAC,KAAAA,KACAC,MAAAA,MACAC,MAAAA,MACAC,SAAAA,SACAC,OAAAA,OACAC,YAAAA,gBAKA,IAAIC,KAAOC,SAASC,cAAcV,KA4GlC,OAvGAC,UAAYO,KAAKG,UAAYV,SAI7BC,OAASM,KAAKI,YAAcV,MAM5BC,OACEU,cAAcV,OAAOW,QAASC,MAC5BC,OAAOC,KAAKF,MAAMD,QAASI,OACZ,YAATA,KACFV,KAAKW,QAAUJ,KAAKG,MACF,YAATA,KACTL,cAAcE,KAAKG,OAAOE,IAAKC,MAC7BL,OAAOC,KAAKI,MAAMP,QAASQ,GAAOd,KAAKe,QAAQD,GAAKD,KAAKC,KAEzC,UAATJ,MAA6B,OAATA,KAC7BV,KAAKgB,aACHN,KACAL,cAAcE,KAAKG,OAChBE,IAAKK,GAAMC,YAAYD,IACvBE,KAAK,MAGVnB,KAAKgB,aAAaN,KAAML,cAAcE,KAAKG,OAAOS,KAAK,SAc/DvB,OACES,cAAcT,OACXgB,IAAKQ,WACqB,iBAAdA,UACFZ,OAAOC,KAAKW,WAChBR,IAAKS,UAAa,GAAGA,aAAaD,UAAUC,aAC5CF,KAAK,MAEDd,cAAce,WAAWD,KAAK,OAGxCA,KAAK,MACLG,MAAM,KACNhB,QAASiB,YACR,IAAKF,SAAUG,KAAOD,UAAUD,MAAM,KAAKV,IAAKa,GAAMA,EAAEC,QACxD1B,KAAKJ,MAAM+B,cAAcN,WAAaG,MAG5C3B,UACEQ,cAAcR,UAAUe,IAAKgB,QAC3B5B,KAAK6B,YACc,iBAAVD,MAAqBrC,cAAcqC,OAASA,SAUzD7B,aACEM,cAAcN,aAAaO,QAASwB,WAClC9B,KAAK+B,iBAAiBD,SAASE,MAAOF,SAASG,MAY/CnC,OACoB,iBAAXA,SACTA,OAAS,CAAC,IAAK,KACZc,IAAKsB,MACGjC,SAASkC,cAAcD,KAAOpC,SAEtCsC,OAAQC,IACO,OAAPA,IACN,IAEFvC,OAASG,SAASkC,cAAc,QAEvCrC,OAAO+B,YAAY7B,MAKZA,MAIHsC,QAAU,CACdC,OAAQhD,eAQJ2B,YAAc,CAACxB,KAAM8C,WAAY,KACrC,SAASC,WAAWC,OAAQC,OAAQC,SAClC,OAAOF,OAAOpB,MAAMqB,QAAQxB,KAAKyB,SAGnC,IAAIC,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,aACfnD,KAAO+C,WAAW/C,KAAM2E,KAAMxB,aAAawB,OAE7C,OAAO7B,UAAY9C,KAAK4E,cAAgB5E,MAIpCW,cAAiBkE,KACjBC,MAAMC,QAAQF,KACTA,IAEA,CAACA,KAKZ,SAAS5C,cAAc+C,GACrB,OAAOA,EACJpD,MAAM,KACNV,IAAI,CAAC+D,GAAIC,IACDA,EAAI,EAAID,GAAGE,OAAO,GAAGC,cAAgBH,GAAGI,MAAM,GAAKJ,IAE3DxD,KAAK",
     "file": "index.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domelemjs",
-  "version": "1.1.0",
+  "version": "1.1.3",
   "description": "With the help of this package the rendering of HTML elements form JavaScript become a easy job.",
   "main": "index.js",
   "scripts": {

package/test/DOMElem.html

@@ -25,53 +25,50 @@
       /* 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 = DOMElem.Create({
+        return options.map((option) =>
+          DOMElem.Create({
             tag: "option",
-
-            content: option,
-          });
-          optionElems.push(optionElem);
-        });
-        return optionElems;
+            text: option,
+          })
+        );
       }
 
       let animals = ["Maci", "Nyuszi", "Cica", "Kutya"];
       let animalOption = generateOption(animals);
 
+      myDOM.selectControl = DOMElem.Create({
+        tag: "label",
+        text: "állatkák:",
+        attrs: { for: "selectControl" },
+        parent: myDOM.selectControlContainer,
+      });
+
       myDOM.selectControl = DOMElem.Create({
         tag: "select",
         attrs: { id: "selectControl" },
         style: { color: "red" },
-        targetParent: myDOM.selectControlContainer,
+        parent: myDOM.selectControlContainer,
         children: animalOption,
       });
 
-      myDOM.selectControl = DOMElem.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(
         DOMElem.Create({
-          tag: "select",
-          attrs: { id: "selectControl" },
-          targetParent: myDOM.selectControlContainer,
-          children: generateOption(plants),
+          tag: "label",
+          text: "fák:",
+          attrs: { for: "selectControl" },
+          parent: myDOM.selectControlContainer,
         })
       );
-
       myDOM.selectControl = myDOM.selectControl.appendChild(
         DOMElem.Create({
-          tag: "label",
-          attrs: { for: "selectControl" },
-          targetParent: myDOM.selectControlContainer,
+          tag: "select",
+          attrs: { id: "selectControl" },
+          parent: myDOM.selectControlContainer,
+          children: generateOption(plants),
         })
       );
 
@@ -94,7 +91,7 @@
                   attrs: {
                     class: "beginDate-lable",
                   },
-                  content: "Kezdő dátum: ",
+                  text: "Kezdő dátum: ",
                 }),
                 DOMElem.Create({
                   tag: "input",
@@ -120,7 +117,7 @@
                   attrs: {
                     class: "endDate-lable",
                   },
-                  content: "Befejező dátum: ",
+                  text: "Befejező dátum: ",
                 }),
                 DOMElem.Create({
                   tag: "input",

package/test/createDOMElem.html

@@ -27,10 +27,14 @@
         text: "It's amazing",
         parent: app,
         style: { color: "red", backgroundColor: "pink" },
-        attrs: {
-          id: "title2",
-          dataset: [{ text: "redText" }, { bg: "greenBG" }],
-        },
+        attrs: [
+          {
+            id: "title2",
+          },
+          {
+            dataset: [{ text: "redText" }, { bg: "greenBG" }],
+          },
+        ],
       });
       createDOMElem({
         tag: "h3",