jQuery创建带连字符属性元素时报Unexpected token '-'如何解决

JavaScript 对对象字面量的未引用属性名有语法要求：只能使用合法的标识符（仅允许包含字母、数字、下划线、$ 符号，且不能以数字开头）。你的代码中直接写了带连字符的 data-dismiss、aria-hidden 作为属性名，JS 解析器会把 - 识别为减法运算符，不符合语法规范，因此抛出 Unexpected token '-' 错误。

方案1：给特殊属性名加引号 #

这是改动最小的修复方式，直接把带连字符的属性名用单引号/双引号包裹即可：

$("<button/>",
  {
    type: 'button',
    class: 'close',
    'data-dismiss': 'alert',
    'aria-hidden': 'true'
  }).appendTo("#testt");

方案2：调用jQuery方法单独设置属性 #

你也可以先创建基础按钮元素，再通过attr()方法单独设置特殊属性，代码可读性更强，也避免了属性名的语法问题：

$("<button/>", {
  type: 'button',
  class: 'close'
})
.attr('data-dismiss', 'alert')
.attr('aria-hidden', 'true')
.appendTo("#testt");

如果只是设置data属性，也可以用data('dismiss', 'alert')，但要注意Bootstrap依赖DOM上的实际data-*属性触发交互，用attr()方法更稳妥。

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