使用jQuery动态创建HTML元素时属性缺失报错如何解决

修复方案 #

代码报错的核心原因是jQuery的addClass()、attr()、css()方法不接收undefined作为入参，当对象缺少对应属性时，传入的无效值会触发类型错误。只需要给每个可选参数设置默认空值即可解决问题：

兼容性写法（全版本支持） #

let array = [{el:'div',class:'card',attr:{id:'abc'},css:{display:'block'}}];
let array2 = [{el:'div'}]
const element = (array) => {
    let el = [];
    Object.values(array).forEach((val)=>{
      const $node = $(`<${val.el}>`)
      // 仅存在对应属性时才调用对应方法
      if (val.class) $node.addClass(val.class)
      if (val.attr) $node.attr(val.attr)
      if (val.css) $node.css(val.css)
      el.push($node)
    })
    return el;
}
element(array) // 运行正常
element(array2) // 运行正常，返回无额外属性的div元素

简化写法（支持ES2020+环境） #

const element = (array) => {
    return Object.values(array).map(val => 
      $(`<${val.el}>`)
        // 空值合并运算符设置默认空值，避免传入undefined
        .addClass(val.class ?? '')
        .attr(val.attr ?? {})
        .css(val.css ?? {})
    )
}

两种写法都可以兼容属性缺失的场景，修改后即使数组项只包含el属性也不会抛出错误。

内容的提问来源于stack exchange，提问作者ANOL GHOSH