动态创建li标签时为a标签添加含数组值的id报错如何解决

问题原因 #

你的错误来自字符串拼接时的引号嵌套逻辑错误：你编写的拼接代码中，items[i] 变量没有被正确嵌入到id属性的字符串值内，引号提前闭合导致JS语法解析失败。
原错误代码里的id="tab_"+items[i]+"> 这段，tab_ 后的双引号直接关闭了id的属性值，后续的+items[i]被当成了HTML内容的一部分，既不符合HTML语法，也没有正确解析JS变量。

正确写法 #

写法1：修正双引号转义拼接 #

$("#test").append("<li><a id=\"tab_" + items[i] + "\">"+items[i]+"</a></li>");

写法2：用单引号包裹HTML字符串（更易读，不需要转义双引号） #

$("#test").append('<li><a id="tab_' + items[i] + '">'+items[i]+'</a></li>');

写法3：使用ES6模板字符串（最推荐，无需手动拼接字符串） #

$("#test").append(`<li><a id="tab_${items[i]}">${items[i]}</a></li>`);

以上三种写法都可以生成你预期的DOM结构。

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