如何实现支持任意属性的通用HTML元素创建JS函数

现有实现的问题 #

你当前的代码存在几个明显缺陷：

• 只能处理硬编码的固定属性，无法支持用户传入的任意属性（比如style、data-*自定义属性、disabled等布尔属性）
• 事件绑定只支持单个固定eventType+eventAction的格式，无法支持多个不同事件，也不兼容用户传入onclick这类标准属性写法
• 逻辑冗余：循环内重复给所有固定属性赋值，和当前遍历的prop完全无关，无意义重复执行
• 参数取值错误：用剩余参数args接收后，解构得到的elementProps已经是传入的属性对象，额外加[0]会导致取值为undefined，代码无法正常运行
• 未兼容class字段映射：用户调用时传的是class属性，直接取className无法对应上取值

优化实现方案 #

function createElement(elementType, props = {}) {
  // 创建基础元素
  const element = document.createElement(elementType);

  // 遍历所有传入的属性逐一处理
  for (const [key, value] of Object.entries(props)) {
    // 处理事件：on开头的属性按事件绑定处理
    if (key.startsWith('on')) {
      const eventType = key.slice(2).toLowerCase();
      element.addEventListener(eventType, value, false);
      continue;
    }

    // 处理class属性映射到className
    if (key === 'class') {
      element.className = value;
      continue;
    }

    // 处理布尔属性（比如disabled、checked）
    if (typeof value === 'boolean') {
      element[key] = value;
      value ? element.setAttribute(key, '') : element.removeAttribute(key);
      continue;
    }

    // 普通属性直接赋值+设置attribute保证一致性
    element[key] = value;
    element.setAttribute(key, value);
  }

  return element;
}

方案优势 #

• 支持任意属性传入，不需要提前硬编码枚举支持的属性
• 兼容标准的onXxx事件写法，支持绑定任意多个不同事件，符合原生JS的书写习惯
• 兼容class属性写法，不用强制用户传className
• 正确处理布尔属性，比如传入disabled: true可以正常生效
• 没有冗余逻辑，每个属性只处理一次
• 参数结构更简单，不需要用剩余参数接收不需要的额外参数

调用示例 #

// 普通元素创建
const div = createElement('div', {class: 'test-class', id: 'testId', innerText: '测试文本'});

// 按钮带点击事件
const btn = createElement('input', {
  class: 'test-class',
  id: 'myInput',
  type: 'button',
  value: '点击我',
  onclick: () => console.log('hello world')
});

如果需要兼容字符串格式的事件处理逻辑，把事件绑定部分改为element.setAttribute(key, value)即可，更推荐传函数，性能和安全性更好

内容的提问来源于stack exchange，提问作者Joey Finkel