DOM ELEMENT FACTORY

dom-element-factory.markdown

DOM ELEMENT FACTORY

A Pen by Bzozoo on CodePen.

License.

script.js

const elFactory = (type, attributes, ...children) => {
  const el = document.createElement(type);

  for (key in attributes) {
    el.setAttribute(key, attributes[key]);
  }

  children.forEach((child) => {
    if (typeof child === "string") {
      el.appendChild(document.createTextNode(child));
    } else {
      el.appendChild(child);
    }
  });

  return el;
};

const redDivCreator = elFactory(
  "div",
  {
    id: "reddiv",
    class: "dobozok",
    style: "background-color: red; color: white; padding: 5px 5px; border: solid 5px black;"
  },
  elFactory("span", {}, "EZ A"),
  " PIROS DIV !"
);


const greenDivCreator = elFactory(
  "div",
  {
    id: "greendiv",
    class: "dobozok",
    style: "background-color: green; margin: 5px 5px; color: white; padding: 5px 5px; border: solid 5px black;"
  },
  elFactory("span", {}, "EZ A"),
  " ZÖLD DIV !"
);

document.body.appendChild(redDivCreator);
reddiv.appendChild(greenDivCreator);