DOM GENERATOR

by João Vitor Scheuermann

HTML

<div id="root"></div>

CSS

#root {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 300px;
  height: 250px;
  border: 1px solid black;
}

JavaScript

function html(tagString, childrensArr, textString, cssObject) { 

  function inObj(obj, cb) {
    for (var key in obj) {
      cb(key, obj[key]);
    }
    return obj;
  };

  function editAtribute(element, atribute, value) {
    if (!value) {
      return element[atribute];
    } else {
      return element[atribute] = value;
    }
  };

  function editCssStyle(element, atribute, value) {
    return editAtribute(element, "style")[atribute] = value;
  };

  function styleObj(element, obj) {
    inObj(obj, function (key, value)  {
      editCssStyle(element, key, value);
    })
    return obj;
  };

  function createElement(tag) {
    return document.createElement(tag);
  };

  function addChild(element, child) {
    element.appendChild(child);
    return element
  };

  function appendText(element, text) {
    var textToAppend = document.createTextNode(text);
    addChild(element, textToAppend);
    return text;
  };

  var element = tagString ? createElement(tagString) : null;

  if (textString) appendText(element, textString);

  if (cssObject) inObj(cssObject, function (key, value) {
    if (key === "style") {
      styleObj(element, value);
    } else {
      editAtribute(element, key, value);
    }
  })

  if (childrensArr) {
    if (childrensArr instanceof Array) {
      /*childrensArr.forEach( function(children) {
        addChild(element, children)
      })*/
      for (var index in childrensArr) {
      	addChild(element, childrensArr[index])
      }
    } else {
      addChild(element, childrensArr)
    }
  }

  return element;
}

/*====================================================*/
/*====================================================*/
/*====================================================*/
console.log(html("div",null,"hue",{id:23, style:{top:"25px"}}));