A Handy DOM element creation function.

createElement.js

// Inspired from Sam Thorogood's article, https://dev.to/chromiumdev/beyond-appendchild-better-convenience-methods-for-html-55n4

function createElement(nodeName, props) {
  const { style = {}, ...propsNoStyle } = props;
  const element = Object.assign(document.createElement(nodeName), propsNoStyle);

  for (const key in style) {
    element.style[key] = style[key];
  };

  return element;
}

Thanks for the inspiration @samthor!

👍

This could use a refresh after reading https://bsky.app/profile/developit.dev/post/3lcwby5wkfs2l from @developit.

function createElement(nodeName, props) {
  const { style = {}, ...propsNoStyle } = props;
  const element = Object.assign(document.createElement(nodeName), propsNoStyle);

  for (const key in style) {
    element.style[key] = style[key];
  };

  return element;
}

My 2c: I get that doing a loop is technically better but holy microoptimization, batman.

Use whatever is easier.