Javascript json中的特殊字符会打断html

我使用的是api，这是json中的一个“符号”，它破坏了我的html

 function heroSkills(id){
      heroSkill = [];
        $.ajax({
          type: "GET",
          async: false,
          url: "js/champs_v2.json",
          dataType: "json",
          success: function(data){
            $(data.data).each(function(index,value){
              var listSkills = value;
              for(ls in listSkills){

                if(listSkills[ls].id == id){
                //  console.log(listSkills[ls].passive.image.full);
                    heroSkill.push({passive_name:listSkills[ls].passive.name,passive_description:listSkills[ls].passive.description,passive_image:listSkills[ls].passive.image.full});

                    for(la in listSkills[ls].spells){
                      champSkill = listSkills[ls].spells[la];
                      skillImage = champSkill.image.full;
                      skillDescription = champSkill.description;
                      skillName = champSkill.name;
                      heroSkill.push({skill_name:skillName,skill_description:skillDescription,skill_image:skillImage});
                    }
                }
              }
            });
            heroSkill.push({version:data.version});
          }
        });

        return heroSkill;

    }

然后我像这样输出它

      var AhriTest = heroSkills("40");
      console.log(AhriTest);
      $('.passive').append("<img src='http://ddragon.leagueoflegends.com/cdn/"+AhriTest[5].version+"/img/passive/"+AhriTest[0].passive_image+"' class='imageClipSmall img-responsive' alt='pas' data-toggle='tooltip' data-html='true' data-placement='right' title=' <p> <h5> " + AhriTest[0].passive_name + " </h5> <small>" + AhriTest[0].passive_description + " </small> </p>' >");

      $('.HeroSkillQ').append("<img src='http://ddragon.leagueoflegends.com/cdn/"+AhriTest[5].version+"/img/spell/"+AhriTest[1].skill_image+"'  class='imageClipSmall' alt='pas' data-toggle='tooltip' data-html='true' data-placement='right' title=' <p> <h5> " + AhriTest[1].skill_name + " </h5> <small>" + AhriTest[1].skill_description + " </small> </p>' >");
      $('.HeroSkillW').append("<img src='http://ddragon.leagueoflegends.com/cdn/"+AhriTest[5].version+"/img/spell/"+AhriTest[2].skill_image+"'  class='imageClipSmall' alt='pas' data-toggle='tooltip' data-html='true' data-placement='right' title=' <p> <h5> " + AhriTest[2].skill_name + " </h5> <small>" + AhriTest[2].skill_description + " </small> </p>' >");
      $('.HeroSkillE').append("<img src='http://ddragon.leagueoflegends.com/cdn/"+AhriTest[5].version+"/img/spell/"+AhriTest[3].skill_image+"'  class='imageClipSmall' alt='pas' data-toggle='tooltip' data-html='true' data-placement='right' title=' <p> <h5> " + AhriTest[3].skill_name + " </h5> <small>" + AhriTest[3].skill_description + " </small> </p>' >");
      $('.HeroSkillR').append("<img src='http://ddragon.leagueoflegends.com/cdn/"+AhriTest[5].version+"/img/spell/"+AhriTest[4].skill_image+"'  class='imageClipSmall' alt='pas' data-toggle='tooltip' data-html='true' data-placement='right' title=' <p> <h5> " + AhriTest[4].skill_name + " </h5> <small>" + AhriTest[4].skill_description + " </small> </p>' >");

---

json本身就是发布它的好方法，所以这里只要一个屏幕，如果需要的话，就可以发布所有内容

处理此类问题的一种方法是在传递属性时使用双引号

$('.passive').append("<img src=\"http://ddragon.leagueoflegends.com/cdn/"+AhriTest[5].version+"/img/passive/"+AhriTest[0].passive_image+"\" class=\"imageClipSmall img-responsive\" alt=\"pas\" data-toggle=\"tooltip\" data-html=\"true\" data-placement=\"right\" title=\" <p> <h5> " + AhriTest[0].passive_name + " </h5> <small>" + AhriTest[0].passive_description + " </small> </p>\" >");

您可以对剩余的字符串重复转义双引号，这将防止字符串在连接时断开

---

另外，仅供参考，title属性中的标记没有任何效果，除非它们通过javascript以某种方式进行处理。

感谢您的帮助，现在我感到很傻，因为我没有意识到这一点=[