Skip to content
JavaScript

DOM 操作

DOM 要素を動的に作成して操作。

#dom#create

Code

javascript
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;
}