使用javascript添加基于json值的动态div标记

我有一个div标记，我正在动态添加一组p标记，这将从json中获取值。问题是p标记被添加到同一个div中，而不是在单独的框中打印。下面是我尝试实现逻辑的代码。其中price标记单独打印在同一个div中，而其他标记则没有打印显示

window.onload=function（）{
document.getElementById（'returnDate'）.style.display='none'；
document.getElementsByClassName（“flightDetails”）[0].style.display=“无”；
航班详情=[{
“航空公司”：“H-200”，
“发件人”：“班加卢鲁（BLR）”，
“致”：“德里（DEL）”，
“细节”：[{
“FlightNum”：“H-201”，
“日期”：“2019-12-30”，
“价格”：“3900”，
“出发时间”：“下午12:00”，
“到达时间”：“下午14:00”，
“席位”：“10”
}, {
“FlightNum”：“H-202”，
“日期”：“2019-12-31”，
“价格”：“3000”，
“出发时间”：“下午17:30”，
“到达时间”：“下午19:30”，
“席位”：“3”
}, {
“FlightNum”：“H-203”，
“日期”：“2019-06-01”，
“价格”：“2100”，
“出发时间”：“上午9:00”，
“到达时间”：“上午11:00”，
“席位”：“7”
}]
}, {
“航空公司”：“K-200”，
“发件人”：“德里（DEL）”，
“致”：“班加卢鲁（BLR）”，
“细节”：[{
“FlightNum”：“K-201”，
“日期”：“2019-12-30”，
“价格”：“3000”，
“出发时间”：“下午12:00”，
“到达时间”：“下午14:00”，
“席位”：“10”
}, {
“FlightNum”：“K-202”，
“日期”：“2019-12-31”，
“价格”：“3000”，
“出发时间”：“下午17:30”，
“到达时间”：“下午19:30”，
“席位”：“3”
}, {
“FlightNum”：“K-203”，
“日期”：“2019-06-01”，
“价格”：“2100”，
“出发时间”：“上午9:00”，
“到达时间”：“上午11:00”，
“席位”：“7”
}]
},
{
“航空公司”：“B-200”，
“发件人”：“钦奈（CHN）”，
“致”：“果阿（果阿）”，
“细节”：[{
“FlightNum”：“B-201”，
“日期”：“2019-12-30”，
“价格”：“4000”，
“出发时间”：“下午12:00”，
“到达时间”：“下午14:00”，
“席位”：“20”
}, {
“FlightNum”：“B-202”，
“日期”：“2019-12-31”，
“价格”：“3000”，
“出发时间”：“下午17:30”，
“到达时间”：“下午19:30”，
“席位”：“3”
}, {
“FlightNum”：“B-203”，
“日期”：“2019-06-01”，
“价格”：“2100”，
“出发时间”：“上午9:00”，
“到达时间”：“上午11:00”，
“席位”：“7”
}]
},
{
“航空公司”：“A-201”，
“发件人”：“钦奈（CHN）”，
“致”：“德里（DEL）”，
“细节”：[{
“FlightNum”：“A-202”，
“日期”：“2019-12-30”，
“价格”：“3900”，
“出发时间”：“下午12:00”，
“到达时间”：“下午14:00”，
“席位”：“10”
}, {
“FlightNum”：“A-203”，
“日期”：“2019-12-31”，
“价格”：“3000”，
“出发时间”：“下午17:30”，
“到达时间”：“下午19:30”，
“席位”：“3”
}, {
“FlightNum”：“A-204”，
“日期”：“2019-06-01”，
“价格”：“2100”，
“出发时间”：“上午9:00”，
“到达时间”：“上午11:00”，
“席位”：“7”
}]
}, {
“航空公司”：“A-301”，
“发件人”：“德里（DEL）”，
“至”：“Hydrabad（HYD）”，
“细节”：[{
“FlightNum”：“A-302”，
“日期”：“2019-05-30”，
“价格”：“3900”，
“出发时间”：“上午8:10”，
“到达时间”：“上午10:10”，
“席位”：“5”
}, {
“FlightNum”：“A-303”，
“日期”：“2019-05-30”，
“价格”：“3000”，
“出发时间”：“下午15:45”，
“到达时间”：“下午17:45”，
“席位”：“1”
}, {
“FlightNum”：“A-304”，
“日期”：“2019-06-01”，
“价格”：“2190”，
“出发时间”：“下午19:20”，
“到达时间”：“晚上21:20”，
“席位”：“12”
}]
}, {
“航空公司”：“A-401”，
“发件人”：“Calicut（CAL）”，
“致”：“德里（DEL）”，
“细节”：[{
“FlightNum”：“A-402”，
“日期”：“2019-05-30”，
“价格”：“3000”，
“出发时间”：“上午9:00”，
“到达时间”：“上午10:50”，
“席位”：“3”
}, {
“FlightNum”：“A-403”，
“日期”：“2019-05-30”，
“价格”：“2910”，
“出发时间”：“下午14:00”，
“到达时间”：“下午15:50”，
“席位”：“5”
}, {
“FlightNum”：“A-404”，
“日期”：“2019-06-01”，
“价格”：“3180”，
“出发时间”：“上午21:10”，
“到达时间”：“23:00 AM”，
“席位”：“12”
}]
}, {
“航空公司”：“J-500”，
“发件人”：“德里（DEL）”，
“致”：“钦奈（中国）”，
“细节”：[{
“FlightNum”：“J-502”，
“日期”：“2019-05-30”，
“价格”：“2820”，
“出发时间”：“上午7:50”，
“到达时间”：“上午9:40”，
“席位”：“7”
}, {
“FlightNum”：“J-503
for (i = 0; matches[0].detail.length; i++)
{
    var div = document.createElement('div');
    div.className = 'flightDetailBox';        
    div.innerHTML = '<p id="flightCost">' + 'Rs' + matches[0].detail[i].price + '</p>' +
      '<p id="flightID">' +  matches[0].detail[i].FlightNum + '</p>' +
      '<p id="fromTo">' + matches[0].from + '>' + matches[0].to + '</p>' +
      '<p id="departTime">' + matches[0].detail[i].departTime + '</p>' +
      '<p id="ariveTime">' + matches[0].detail[i].arriveTime + '</p>' +
      '<button type="submit" id="bookTicketButton" onclick="bookTicket()">BOOK TICKET</button>';

   document.getElementById('flightDetails').appendChild(div);
}

for (i = 0; matches[0].detail.length; i++)
{
    var div = document.createElement('div');
    div.className = 'flightDetailBox';        
    div.innerHTML = `<p id="flightCost">Rs ${matches[0].detail[i].price}</p>` +
      `<p id="flightID">${matches[0].detail[i].FlightNum}</p>` +
      `<p id="fromTo">${matches[0].from} > ${matches[0].to}</p>` +
      `<p id="departTime">${matches[0].detail[i].departTime}</p>` +
      `<p id="ariveTime">${matches[0].detail[i].arriveTime}</p>` +
      `<button type="submit" id="bookTicketButton" onclick="bookTicket()">BOOK TICKET</button>`;

   document.getElementById('flightDetails').appendChild(div);
}