json-break-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-it-self太大了，所以这里只是一个屏幕就成了问题http://puu.sh/fAnBB/f735ab544c.png/Untitled-4.png如果需要，可以全部发布。