Skip to content
JavaScript

DOM Manipulation

Dynamically create and manipulate DOM elements.

By EZ4Code Team
domcreate

Code

function h(tag, props = {}, children = []) {
  const el = document.createElement(tag);
  for (const [k, v] of Object.entries(props)) {
    if (k === "class") el.className = v;
    else if (k === "style") Object.assign(el.style, v);
    else if (k.startsWith("on")) el.addEventListener(k.slice(2).toLowerCase(), v);
    else el.setAttribute(k, v);
  }
  children.forEach(c => el.append(typeof c === "string" ? document.createTextNode(c) : c));
  return el;
}

Explanation

A hyperscript-like virtual DOM creation function.

More JavaScript Snippets