A different way to create HTML elements

Question

I created this module to help with the creation of HTML elements:

function createElement(tag) {
  return function (...children) {
    let element = document.createElement(tag);
    for (let child of children) {
      if (child instanceof Element) {
        element.appendChild(child);
      } else if (child && child.elem && child.elem instanceof Element) {
        element.appendChild(child.elem);
      } else {
        element.appendChild(new Text(child));
      }
    }
    return element;
  };
}

Element.prototype.e = function (event, callback) {
  this.addEventListener(event, callback);
  return this;
};

Element.prototype.c = function (...classes) {
  this.classList.add(...classes);
  return this;
};

Element.prototype.a = function (key, value) {
  this.setAttribute(key, value);
  return this;
};

export const a = createElement("a");
export const abbr = createElement("abbr");
export const address = createElement("address");
export const area = createElement("area");
export const article = createElement("article");
export const aside = createElement("aside");
export const audio = createElement("audio");
export const b = createElement("b");
export const base = createElement("base");
export const bdi = createElement("bdi");
export const bdo = createElement("bdo");
export const blockquote = createElement("blockquote");
export const body = createElement("body");
export const br = createElement("br");
export const button = createElement("button");
export const canvas = createElement("canvas");
export const caption = createElement("caption");
export const cite = createElement("cite");
export const code = createElement("code");
export const col = createElement("col");
export const colgroup = createElement("colgroup");
export const data = createElement("data");
export const datalist = createElement("datalist");
export const dd = createElement("dd");
export const del = createElement("del");
export const details = createElement("details");
export const dfn = createElement("dfn");
export const dialog = createElement("dialog");
export const div = createElement("div");
export const dl = createElement("dl");
export const dt = createElement("dt");
export const em = createElement("em");
export const embed = createElement("embed");
export const fieldset = createElement("fieldset");
export const figcaption = createElement("figcaption");
export const figure = createElement("figure");
export const footer = createElement("footer");
export const form = createElement("form");
export const h1 = createElement("h1");
export const h2 = createElement("h2");
export const h3 = createElement("h3");
export const h4 = createElement("h4");
export const h5 = createElement("h5");
export const h6 = createElement("h6");
export const head = createElement("head");
export const header = createElement("header");
export const hr = createElement("hr");
export const html = createElement("html");
export const i = createElement("i");
export const iframe = createElement("iframe");
export const img = createElement("img");
export const input = createElement("input");
export const ins = createElement("ins");
export const kbd = createElement("kbd");
export const label = createElement("label");
export const legend = createElement("legend");
export const li = createElement("li");
export const link = createElement("link");
export const main = createElement("main");
export const map = createElement("map");
export const mark = createElement("mark");
export const math = createElement("math");
export const menu = createElement("menu");
export const meta = createElement("meta");
export const meter = createElement("meter");
export const nav = createElement("nav");
export const noscript = createElement("noscript");
export const object = createElement("object");
export const ol = createElement("ol");
export const optgroup = createElement("optgroup");
export const option = createElement("option");
export const output = createElement("output");
export const p = createElement("p");
export const param = createElement("param");
export const picture = createElement("picture");
export const portal = createElement("portal");
export const pre = createElement("pre");
export const progress = createElement("progress");
export const q = createElement("q");
export const rb = createElement("rb");
export const rp = createElement("rp");
export const rt = createElement("rt");
export const rtc = createElement("rtc");
export const ruby = createElement("ruby");
export const s = createElement("s");
export const samp = createElement("samp");
export const script = createElement("script");
export const section = createElement("section");
export const select = createElement("select");
export const slot = createElement("slot");
export const small = createElement("small");
export const source = createElement("source");
export const span = createElement("span");
export const strong = createElement("strong");
export const style = createElement("style");
export const sub = createElement("sub");
export const summary = createElement("summary");
export const sup = createElement("sup");
export const svg = createElement("svg");
export const table = createElement("table");
export const tbody = createElement("tbody");
export const td = createElement("td");
export const template = createElement("template");
export const textarea = createElement("textarea");
export const tfoot = createElement("tfoot");
export const th = createElement("th");
export const thead = createElement("thead");
export const time = createElement("time");
export const title = createElement("title");
export const tr = createElement("tr");
export const track = createElement("track");
export const u = createElement("u");
export const ul = createElement("ul");
export const var_ = createElement("var");
export const video = createElement("video");
export const wbr = createElement("wbr");

Here is a usage example:

import { div, ol, li, input, button, h1 } from "./elements.js";

class List {
  constructor() {
    this.list = ol();
    this.input = input().a("size", 20);
    this.elem = div(
      this.list,
      this.input,
      " ",
      button("add item").e("click", () => this.addItem())
    ).c("list");
  }

  addItem() {
    this.list.appendChild(li(this.input.value));
    this.input.value = ""
  }
}

document.body.appendChild(div(h1("List Creator"), new List()));

It has been working very well for me, but I'm curious to hear what you think.

This project uses it: Tree Editor

You might find htm to be a reasonable alternative to this library. — ggorlen
– ggorlen, Commented Nov 15 at 21:50
"You might find htm to be a reasonable alternative to this library." Huh? — guest271314
– guest271314, Commented Nov 15 at 21:58
This seems really bad practice, since it makes something that should be simple, self-explanatory and generic, suddenly require studying the personal preferences of one specific developer. Not only that, but the code seems unaware that let div = new HTMLDivElement() already exists in javascript. — Kokodoko
– Kokodoko, Commented 2 days ago
@Kokodoko Any reason you didn't put your opinion in a formal answer? — guest271314
– guest271314, Commented yesterday

guest271314 · Accepted Answer · 2025-11-15 22:37:33Z

1

I would suggest considering changing the names of the methods to something that resemble what they are intended to and do.

For example, using an underscore to differentiate your custom methods from global methods.

I have no opinion on your reasoning for writing the code.

Element.prototype._addEventListener = function (event, callback) {
  this.addEventListener(event, callback);
  return this;
};

Element.prototype._classListAdd = function (...classes) {
  this.classList.add(...classes);
  return this;
};

Element.prototype._setAttribute = function (key, value) {
  this.setAttribute(key, value);
  return this;
};

answered Nov 15 at 22:37

guest271314

7383 silver badges12 bronze badges

\$\begingroup\$ Yeah, exactly. One-letter method names are in general confusing. And having a method a on something representing an HTML element is IMHO doubly so. "Wait, what?! Why does that div have an anchor there?" \$\endgroup\$

TomG
– TomG

2025-11-16 13:40:07 +00:00
Commented Nov 16 at 13:40
\$\begingroup\$ I think you missed the point of the OP's functions, as your naming suggestions give no indication of why a user would use them rather than the (slightly) less verbose existing functions. \$\endgroup\$

Blindman67
– Blindman67

2025-11-16 16:17:01 +00:00
Commented Nov 16 at 16:17
1

\$\begingroup\$ @Blindman67 I explicitly stated in my answer that I do not address the why's and what-for's. "I have no opinion on your reasoning for writing the code." \$\endgroup\$

guest271314
– guest271314

2025-11-16 18:50:23 +00:00
Commented Nov 16 at 18:50
\$\begingroup\$ The idea is that those methods are used so frequently that the short name is ok (like the $ in jquery). \$\endgroup\$

Justin Massey
– Justin Massey

2025-11-17 06:21:40 +00:00
Commented Nov 17 at 6:21

Add a comment |

Stack Exchange Network

A different way to create HTML elements

1 Answer 1

You must log in to answer this question.

Hot Network Questions

A different way to create HTML elements

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions