Enhancements to createElement

Right now we can pass in only one child to our createElement. Let’s ramp it up to handle multiple children. Our createElement also doesn’t handle props other than events, let’s add a setAttribute method so we can add some color! Now we have:

const createElement = (type, props, ...children) => {
  const element = document.createElement(type);
  for (const [key, value] of Object.entries(props)) {
    if (key.startsWith("on") && typeof value === "function") {
      const event = key.slice(2).toLowerCase();
      element.addEventListener(event, value);
    } else {
      element.setAttribute(key, value);
    }
  }

  children.forEach((child) => {
    const node =
      typeof child === "string" ? document.createTextNode(child) : child;
    element.appendChild(node);
  });
  return element;
};

Now we can return multiple elements from our App with some added color!

function App() {
  const button = createElement(
    "button",
    { onClick: () => incrementScore(), style: "background-color:red" },
    `Global var ${score}`
  );

  const heading = createElement("h1", {}, "Hello World!");

  return createElement("div", {}, heading, button);
}

Render Function

A simple render function

function render(component, container) {
  container.innerHTML = "";
  container.appendChild(component);
}

• component: a DOM element created using createElement.

• container: the root DOM node where the UI will be mounted (e.g., document.getElementById("app")).

• innerHTML = "": clears any existing DOM content (simulating re-render).

• appendChild(component): mounts the new component.

const root = document.getElementById("app");

function App() {
  ....
}

render(App(), root);

Code Sandbox