html.ts

function element<e extends HTMLElementTagNameMap[keyof HTMLElementTagNameMap]>(
  tag: keyof HTMLElementTagNameMap,
  attributes: { [k in keyof HTMLParagraphElement]?: string; },
  events: { [k in keyof HTMLElementEventMap]?: string; },
  ...children: HTMLElement[]
): e {
  const element = document.createElement(tag) as e;

  Object.keys(attributes).forEach(key => {
    if (key === 'innerText') {
      element.innerText = attributes[key];
      return;
    }
    element.setAttribute(key, attributes[key]);
  });

  Object.keys(events).forEach(key => {
    element.addEventListener(key, events[key]);
  });

  children.forEach(child => element.appendChild(child));

  return element;
}

function div(
  attributes: { [k in keyof HTMLParagraphElement]?: string; },
  events: { [k in keyof HTMLElementEventMap]?: string; },
  ...children: HTMLElement[]
): HTMLDivElement {
  return element<HTMLDivElement>('div', attributes, events, ...children);
}

function p(
  attributes: { [k in keyof HTMLParagraphElement]?: string; },
  events: { [k in keyof HTMLElementEventMap]?: string; },
  ...children: HTMLElement[]
): HTMLParagraphElement {
  return element<HTMLParagraphElement>('p', attributes, events, ...children);
}

function span(
  attributes: { [k in keyof HTMLParagraphElement]?: string; },
  events: { [k in keyof HTMLElementEventMap]?: string; },
  ...children: HTMLElement[]
): HTMLSpanElement {
  return element<HTMLSpanElement>('span', attributes, events, ...children);
}

div(
  { title: 'This is a div.' },
  {},
  p(
    { title: 'This is a paragraph.' },
    {},
    span(
      { innerText: 'This is a span.' },
      {}
    )
  )
);

// Creates:
// <div title="This is a div."><p title="This is a paragraph."><span>This is a span.</span></p></div>