Javascript 动态添加html内容时出现意外的标记非法错误

我从rest Web服务获取以下json。-

[
{
    "jobId": 1000160829,
    "jobRefID": "Blue Shields key hospital contract negotiations using robust analytic tools and analyses--strategic contract roadmap, negotiation factsheets, and…",
    "companyName": "Blue Shield Of California",
    "jobTitle": "Senior Manger, Business Analysis",
}]

我有以下代码来使用这些数据并生成动态html内容-

htmlAdd += '<ul class="list-unstyled">';
            for (i=0; i<data.length; i++){
                htmlAdd += '<li><div class="row"><div class="col-lg-2"> <img class="img-responsive" src="assets/images/companies/opentable.png" alt="" />';
                htmlAdd += '</div><div class="col-lg-10"><ul align="left" class="list-unstyled">';
                htmlAdd += '<li><h4><a href="#">'+data[i].jobTitle+'&#8212;</a></h4>;
                htmlAdd += '</li><li>'+data[i].companyName+'&#8212;'+data[i].city+', '+data[i].state+'&nbsp;<a href="#"><span class="glyphicon glyphicon-map-marker"></span></a></li>';
                htmlAdd += '<li class="digest">&#183; '+data[i].jobDescription+'<a href="#">details</a></li>;
                htmlAdd += '</ul></div></div></li>;
                htmlAdd += '<li><hr/></li>';
            }
           htmlAdd += '</ul>;
           document.getElementById('jobListing').innerHTML = htmlAdd;

相同的静态代码工作-

<div class="content">
      <ul class="list-unstyled">
        <li>
          <div class="row">
            <div class="col-lg-2"> <img class="img-responsive" src="assets/images/companies/opentable.png" alt="" /> </div>
            <div class="col-lg-10">
              <ul align="left" class="list-unstyled">
                <li>
                  <h4><a href="#">Senior Software Engineer &#8212; Data Science team</a></h4>
                </li>
                <li class="digest">&#183; Rapidly develop proof-of-concept prototypes to prove out hypotheses 
                  &#183; Design, architect, implement, and debug robust, high-volume production...&nbsp;<a href="#">details</a></li>
                <li class="digest"><a href="#">Overview</a> | <a href="#">Reviews</a> | <a href="#">Salaries</a></li>
              </ul>
            </div>
          </div>
        </li>
        <li>
          <hr/>
        </li>

---

有人知道错误在哪里吗？

以下内容应该会有所帮助，因为您的原始代码缺少匹配的撇号

for (i=0; i<data.length; i++){
    htmlAdd += '<li><div class="row"><div class="col-lg-2"> <img class="img-responsive" src="assets/images/companies/opentable.png" alt="" />';
    htmlAdd += '</div><div class="col-lg-10"><ul align="left" class="list-unstyled">';
    htmlAdd += '<li><h4><a href="#">'+data[i].jobTitle+'&#8212;</a></h4>';
    htmlAdd += '</li><li>'+data[i].companyName+'&#8212;'+data[i].city+', '+data[i].state+'&nbsp;<a href="#"><span class="glyphicon glyphicon-map-marker"></span></a></li>';
    htmlAdd += '<li class="digest">&#183; '+data[i].jobDescription+'<a href="#">details</a></li>';
    htmlAdd += '</ul></div></div></li>';
    htmlAdd += '<li><hr/></li>';
}
htmlAdd += '</ul>';

---

修复撇号

从语法突出显示中可以明显看出，您忘记了js代码中的一些字符串分隔符。斜杠/是elegal-您必须转义它。@madflow:嗯，什么？哪里是非法的？@Bergi在我的脑子里显然…他们在这行中也遗漏了一个撇号：htmlAdd+='；不要忘记htmlAdd+='；…编辑了答案，是的，我在发布后又抓到了一些。