Source code
Revision control
Copy as Markdown
Other Tools
const UI = {
createElement: config => {
if (!config) return document.createElement("div");
const elementType = config.element || "div";
const element = document.createElement(elementType);
Object.keys(config).forEach(property => {
const value = config[property];
switch (property.toLowerCase()) {
case "id":
case "src":
case "style":
case "placeholder":
case "title":
element.setAttribute(property, value);
return;
case "classname":
element.setAttribute("class", value);
return;
case "text":
element.innerText = value;
return;
case "html":
element.innerHTML = value;
return;
case "onclick":
element.onclick = value.bind(element);
return;
case "onchange":
element.onchange = value.bind(element);
return;
case "onkeydown":
element.onkeydown = value.bind(element);
return;
case "type":
if (elementType === "input") element.setAttribute("type", value);
return;
case "children":
if (value instanceof Array) {
value.forEach(child =>
element.appendChild(
child instanceof Element ? child : UI.createElement(child)
)
);
} else {
element.appendChild(
value instanceof Element ? value : UI.createElement(value)
);
}
return;
case "disabled":
if (value) element.setAttribute("disabled", true);
return;
}
});
return element;
},
getElement: id => {
return document.getElementById(id);
},
getRoot: () => {
return document.getElementsByTagName("body")[0];
}
};