使用innerHTML动态生成DOM时h3与p标签无法嵌套入section标签的问题

在通过JavaScript从文件读取数据并渲染到HTML页面时，出现h3、p标签无法正确嵌套在section和div内部的问题，页面渲染后结构混乱。

原代码问题分析 #

原代码通过多次innerHTML +=拼接HTML片段，但浏览器会即时解析并补全未闭合的标签：

• 第一次执行containerElement.innerHTML += "<section class='flight-info'> ";时，浏览器会自动补全为<section class='flight-info'></section>
• 后续添加的div、h3、p等元素都会变成section的同级元素，而非子元素，导致嵌套结构失效

修复方案 #

方案1：一次性拼接完整HTML字符串 #

先将所有需要渲染的HTML内容拼接成一个完整字符串，再一次性赋值给innerHTML，避免浏览器提前补全标签：

// 构建完整的HTML结构字符串
const flightHtml = `
<section class='flight-info'>
  <div class='topBox'>
    <h3 class='destination'>${FlightInfo[i].destination}</h3>
    <p class='departTime'>Depart time: ${FlightInfo[i].departTime}</p>
    <p class='timeStop'>${FlightInfo[i].stops !== 0 ? FlightInfo[i].stops : 'Non-Stop'}, ${FlightInfo[i].time} min</p>
  </div>
</section>
`;

// 一次性追加到容器
containerElement.innerHTML += flightHtml;

方案2：使用DOM API创建元素（更推荐） #

直接通过DOM方法创建元素并手动嵌套，完全避免HTML解析的自动补全问题，同时降低XSS风险：

// 创建section容器
const flightSection = document.createElement('section');
flightSection.classList.add('flight-info');

// 创建topBox容器
const topBox = document.createElement('div');
topBox.classList.add('topBox');

// 创建目的地标题
const destinationTitle = document.createElement('h3');
destinationTitle.classList.add('destination');
destinationTitle.textContent = FlightInfo[i].destination;

// 创建起飞时间段落
const departTimePara = document.createElement('p');
departTimePara.classList.add('departTime');
departTimePara.textContent = `Depart time: ${FlightInfo[i].departTime}`;

// 创建经停信息段落
const timeStopPara = document.createElement('p');
timeStopPara.classList.add('timeStop');
timeStopPara.textContent = `${FlightInfo[i].stops !== 0 ? FlightInfo[i].stops : 'Non-Stop'}, ${FlightInfo[i].time} min`;

// 嵌套元素
topBox.appendChild(destinationTitle);
topBox.appendChild(departTimePara);
topBox.appendChild(timeStopPara);
flightSection.appendChild(topBox);

// 添加到页面容器
containerElement.appendChild(flightSection);

内容的提问来源于stack exchange，提问作者Parmingo