使用innerHTML修改div内容时FontAwesome图标无法生效问题求解

你的代码运行异常是由字符串引号嵌套冲突导致的：你给innerHTML赋值时外层用了双引号包裹整段HTML字符串，内部i标签的class、aria-hidden属性同样使用了双引号，JS会误将内部的双引号识别为外层字符串的结束标识，无法正确解析FontAwesome的图标标签内容。

你可以任选以下两种方案修改代码：

• 方案1：将外层字符串的包裹引号改为单引号，无需修改内部标签的引号写法
• 方案2：保留外层双引号，给内部所有属性的双引号前添加转义符\

function chPlay2() {
    // 注意确保audio变量在当前作用域下可正常访问
    if (document.getElementById("player").title == "Toggle Play") {
        audio.play();
        document.getElementById("player").title = "Toggle Stop";
        document.getElementById("player").innerHTML = '&nbsp;<i class="fa fa-stop" aria-hidden="true"></i>';
    } else {
        audio.pause();
        document.getElementById("player").title = "Toggle Play";
        document.getElementById("player").innerHTML = '&nbsp;<i class="fa fa-play" aria-hidden="true"></i>';
    }
}

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