https://www.vsemirnyjbank.org/ext/scripts/dom-helpers.js

1/**
2 * Helper for more concisely generating DOM Elements with attributes and children
3 * @param {string} tag HTML tag of the desired element
4 * @param  {[Object?, ...Element]} items: First item can optionally be an object of attributes,
5 *  everything else is a child element
6 * @returns {Element} The constructred DOM Element
7 */
8export function domEl(tag, ...items) {
9  const element = document.createElement(tag);
10
11  if (!items || items.length === 0) return element;
12
13  if (!(items[0] instanceof Element || items[0] instanceof HTMLElement) && typeof items[0] === 'object') {
14    const [attributes, ...rest] = items;
15    items = rest;
16
17    Object.entries(attributes).forEach(([key, value]) => {
18      if (!key.startsWith('on')) {
19        element.setAttribute(key, Array.isArray(value) ? value.join(' ') : value);
20      } else {
21        element.addEventListener(key.substring(2).toLowerCase(), value);
22      }
23    });
24  }
25
26  items.forEach((item) => {
27    item = item instanceof Element || item instanceof HTMLElement
28      ? item
29      : document.createTextNode(item);
30    element.appendChild(item);
31  });
32
33  return element;
34}
35
36/*
37  More short hand functions can be added for very common DOM elements below.
38  domEl function from above can be used for one off DOM element occurrences.
39*/
40export function div(...items) { return domEl('div', ...items); }
41export function p(...items) { return domEl('p', ...items); }
42export function a(...items) { return domEl('a', ...items); }
43export function h1(...items) { return domEl('h1', ...items); }
44export function h2(...items) { return domEl('h2', ...items); }
45export function h3(...items) { return domEl('h3', ...items); }
46export function h4(...items) { return domEl('h4', ...items); }
47export function h5(...items) { return domEl('h5', ...items); }
48export function h6(...items) { return domEl('h6', ...items); }
49export function ul(...items) { return domEl('ul', ...items); }
50export function ol(...items) { return domEl('ol', ...items); }
51export function li(...items) { return domEl('li', ...items); }
52export function i(...items) { return domEl('i', ...items); }
53export function img(...items) { return domEl('img', ...items); }
54export function span(...items) { return domEl('span', ...items); }
55export function form(...items) { return domEl('form', ...items); }
56export function input(...items) { return domEl('input', ...items); }
57export function label(...items) { return domEl('label', ...items); }
58export function button(...items) { return domEl('button', ...items); }
59export function iframe(...items) { return domEl('iframe', ...items); }
60export function nav(...items) { return domEl('nav', ...items); }
61export function fieldset(...items) { return domEl('fieldset', ...items); }
62export function article(...items) { return domEl('article', ...items); }
63export function strong(...items) { return domEl('strong', ...items); }
64export function select(...items) { return domEl('select', ...items); }
65export function option(...items) { return domEl('option', ...items); }
66export function video(...items) { return domEl('video', ...items); }
67export function source(...items) { return domEl('source', ...items); }
68export function hr(...items) { return domEl('hr', ...items); }
69export function section(...items) { return domEl('section', ...items); }
70export function picture(...items) { return domEl('picture', ...items); }
71export function blockquote(...items) { return domEl('blockquote', ...items); }