如何使用JavaScript创建带有动态日期id的div元素

问题原因 #

• 你当前使用普通单引号'包裹字符串，只有**反引号 包裹的JavaScript模板字符串**才会解析${变量名}`格式的占位符
• 你给id属性值用反引号包裹，不符合HTML属性的语法规范，浏览器无法正确识别属性值

解决方法 #

方案1：使用模板字符串（推荐） #

将三目运算中需要插入变量的字符串外层改为反引号包裹，id属性改用双引号包裹即可，示例代码如下：

var v = e[c].day;
// 注意此处年份变量为你说明的t，原代码误用y，id格式按日/月/年拼接，可自行调整变量顺序
var m = g(new Date(t, n - 1, v))
  ? `<div id="${v}/${n}/${t}" class="today" type="button" onclick="addRow()">`
  : '<div type="button" onclick="addRow()">';
l.append(m + '<span class="month">' + i[n-1]+ '</span>' + v + '</div>');

方案2：使用普通字符串拼接 #

如果不需要使用模板字符串，也可以直接用加号拼接变量和字符串：

var m = g(new Date(t, n - 1, v))
  ? '<div id="' + v + '/' + n + '/' + t + '" class="today" type="button" onclick="addRow()">'
  : '<div type="button" onclick="addRow()">';

小提示：HTML的id属性中使用/属于特殊字符，后续如果用querySelector选择该元素需要做转义处理，建议将分隔符替换为-或者_，比如${v}-${n}-${t}，使用时更加方便。

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