2024-05-05 00:34:27 +00:00
|
|
|
/**
|
2024-05-22 16:02:58 +00:00
|
|
|
* HTML Tag Scripting Function
|
2024-05-05 00:34:27 +00:00
|
|
|
*
|
2024-05-22 16:34:59 +00:00
|
|
|
* Generates new DOM element(s) from a tag, attributes
|
2024-05-22 16:02:58 +00:00
|
|
|
*
|
2024-05-22 16:34:59 +00:00
|
|
|
* @param {string} tag - tag name
|
|
|
|
* @param {any} args - attributes, text or array of child elements
|
2024-05-05 00:34:27 +00:00
|
|
|
*
|
|
|
|
* @returns {HTMLElement} The created DOM element(s)
|
|
|
|
*/
|
2024-05-22 16:02:58 +00:00
|
|
|
export default function h(tag, ...args) {
|
2024-05-05 00:34:27 +00:00
|
|
|
const el = document.createElement(tag);
|
|
|
|
|
2024-05-05 19:00:47 +00:00
|
|
|
// support all scalar values as TextNodes
|
|
|
|
const isScalar = (value) => ["boolean", "string", "number"].includes(typeof value);
|
|
|
|
|
2024-05-05 00:34:27 +00:00
|
|
|
args.forEach((arg) => {
|
2024-05-05 19:00:47 +00:00
|
|
|
if (isScalar(arg)) {
|
2024-05-05 00:34:27 +00:00
|
|
|
el.appendChild(document.createTextNode(arg));
|
|
|
|
} else if (Array.isArray(arg)) {
|
|
|
|
el.append(...arg);
|
|
|
|
} else {
|
|
|
|
Object.assign(el, arg);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
return el;
|
|
|
|
}
|