Javascript 最终在循环中错误地创建HTML

我需要在for循环中动态创建这段HTML

<ul class="restListings">
   <br>
   <sub class="sub">Your Favorite Restaurant</sub>
   <li>
      <h6>Restaurant Name</h6>
       <p>Near Office</p>
   </li>
   <li>
      <h6>Restaurant Name</h6>
      <p>Near Office</p>
   </li>
   <li>
      <h6>Restaurant Name</h6>
      <p>Near HDFC Bank, Madhapur, Hyderabad.</p>
   </li>
   <li>
      <h6>Restaurant Name</h6>
      <p>Near Office</p>
   </li>
</ul>

你最喜欢的餐厅

餐厅名称
办公室附近



餐厅名称
办公室附近



餐厅名称
海得拉巴马达普尔HDFC银行附近



餐厅名称
办公室附近

但我最终创建了这个HTML

<ul class="restListings" style="display: block;">
   <sub class="sub">Your Favorite Restaurant<br>
      <li>
      </li>
      <h6>OhrisHome</h6>
      <p>Near Office</p>
      <li>
      </li>
      <h6>SwagtahtHome</h6>
      <p>Near Home</p>
      <li>
      </li>
      <h6>ParadiseHome</h6>
      <p>Secundrabad</p>
   </sub>
</ul>

你最喜欢的餐厅



奥里斯之家酒店
办公室附近



斯瓦格塔托姆
近在咫尺



天堂之家
秘密拉巴

这是我的代码，它产生上述

var response =
[
    {
        "RestaurantName": "OhrisHome",
        "Locality": "Near Office"

    },
    {
        "RestaurantName": "SwagtahtHome",
        "Locality": "Near Home"

    },
    {
        "RestaurantName": "ParadiseHome",
        "Locality": "Secundrabad"

    }
];

var divhtml = $('<sub class="sub">Your Favorite Restaurant</sub>');
divhtml.append('<br>');

for(var i=0;i<response.length;i++)
{
divhtml.append('<li>');
divhtml.append('<h6>'+response[i].RestaurantName+'</h6>');
divhtml.append('<p>'+response[i].Locality+'</p>');
divhtml.append('</li>');
}

$('.restListings').append(divhtml);

var响应=
[
{
“餐厅名称”：“OhrisHome”，
“地点”：“办公室附近”
},
{
“餐厅名称”：“SwagtahtHome”，
“地点”：“离家近”
},
{
“餐厅名称”：“天堂之家”，
“地点”：“Secundrabad”
}
];
var divhtml=$（“您最喜欢的餐厅”）；
追加（“
”）；
对于（var i=0；i，您可以执行以下操作：

for(var i=0;i<response.length;i++)
{
    divhtml.append('<li>
        <h6>'+response[i].RestaurantName+'</h6>
        <p>'+response[i].Locality+'</p>
        </li>');
}

所需HTML无效。只有
元素可以是
的子元素。
for(var i=0;i<response.length;i++)
{
    theHtml = '<li>';
    theHtml += '<h6>'+response[i].RestaurantName+'</h6>';
    theHtml += '<p>'+response[i].Locality+'</p>';
    divhtml.append(theHTML + '</li>');
}