使用jQuery追加含多类名HTML元素时的语法错误解决咨询

嘿，我来帮你搞定这个问题～你遇到的语法错误根本不是因为class里的空格，而是双引号嵌套冲突导致的！

你写的代码里，外层jQuery选择器用了双引号$("ul.star-rating")，而要追加的HTML字符串里也用了双引号class="fa fa-star"——浏览器会把第一个遇到的"当成字符串的结束标记，后面的代码就乱套了，所以才会报“缺少)”的错误。

给你三种靠谱的解决方法，随便哪种都能达到你想要的效果：

• 方法1：内层用单引号包裹HTML属性
  把HTML字符串里的双引号换成单引号，和外层的双引号区分开，空格完全不用处理，浏览器能正常识别class里的空格：

  $("ul.star-rating").append('<li><i class="fa fa-star"></i></li>');
  

• 方法2：转义内层的双引号
  如果非要保持双引号嵌套，就用反斜杠\转义HTML里的双引号，告诉浏览器这些引号是字符串的一部分：

  $("ul.star-rating").append("<li><i class=\"fa fa-star\"></i></li>");
  

• 方法3：用ES6模板字符串（推荐）
  用反引号`包裹整个HTML字符串，里面可以直接用双引号，可读性还更好，甚至能换行写代码：

  $("ul.star-rating").append(`<li><i class="fa fa-star"></i></li>`);
  

不管用哪种方法，执行后都会成功把目标列表项追加到ul.star-rating中，最终得到你想要的结构：

<ul class="star-rating">
  <li><i class="fa fa-star"></i></li>
</ul>

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