Javascript 使用ajax连接html和

嗨：我是一个使用javascript和开发Web的初学者。我经常使用ajax加载页面内容。我发现有一件事很烦人，那就是手工连接html的大段，例如：

html += '<div class="my-container record-content list-item">';
html += '<div class="my-container record-content list-row list-item-title">';
html += '<div class="my-container text-wrapper list-text-wrapper">';
html += '<p>purchase ID:&nbsp'+data['purchase_id']+'</p>';
html += '</div>';
html += '<div class="my-container list-text-wrapper">';
html += '<p>'+purchase_date+'</p>';
html += '</div>';
html += '</div>';
html += '<div class="my-container record-content list-row">';
html += '<div class="my-container text-wrapper list-text-wrapper">';
html += '<h4>'+data['departure_city']+'</h4>';
html += '</div>';
html += '<div class="my-container icon-wrapper right-arrow">';
html += '</div>';
html += '<div class="my-container text-wrapper list-text-wrapper">';
html += '<h4>'+data['arrival_city']+'</h4>';
html += '</div>';                   
html += '</div>';
html += '<div class="my-container record-content list-row">';
html += '<div class="my-container text-wrapper list-text-wrapper">';
html += '<p>time</p>';
html += '</div>';
html += '<div class="my-container text-wrapper list-text-wrapper">';
html += '<p>'+departure_time+'</p>';
html += '</div>';       
html += '<div class="my-container text-wrapper list-text-wrapper">';
html += '<p>'+data['airline_name']+'</p>';
html += '</div>';
html += '<div class="my-container text-wrapper list-text-wrapper">';
html += '<p>'+data['flight_num']+'</p>';
html += '</div></div>';
html += '<div class="my-container record-content list-row">';
html += '<div class="my-container text-wrapper list-text-wrapper">';
html += '<p>passenger</p>';
html += '</div>';
html += '<div class="my-container text-wrapper list-text-wrapper">';
html += '<p>'+data['passenger_list']+'</p>';
html += '</div>';                               
html += '</div>';                                   
html += '</div>';
return html;

html+=''；
html+=''；
html+=''；
html+='采购ID:+data['purchase_ID']+'
；
html+=''；
html+=''；
html+=''+购买日期+'
'；
html+=''；
html+=''；
html+=''；
html+=''；
html+=''+数据['出发城市]+''；
html+=''；
html+=''；
html+=''；
html+=''；
html++''+数据['arrival_city']+''；
html+=''；
html+=''；
html+=''；
html+=''；
html+='时间
'；
html+=''；
html+=''；
html+=''+出发时间+'
'；
html+=''；
html+=''；
html+=''+数据['airline_name']+'
'；
html+=''；
html+=''；
html+=''+数据['flight_num']+'
'；
html+=''；
html+=''；
html+=''；
html+='乘客
'；
html+=''；
html+=''；
html+=''+数据['passenger_list']+'
'；
html+=''；
html+=''；
html+=''；
返回html；

---

有什么更好的方法可以做到这一点吗？

除了一些辅助函数外，模板文本还允许您编写多行字符串。使用反勾号：

let html = `
    <div class="my-container record-content list-item">
    <div class="my-container record-content list-row list-item-title">
    // etcetera
`

let html=`
//等等
`

---

除了一些辅助函数外，模板文本还允许您编写多行字符串。使用反勾号：

let html = `
    <div class="my-container record-content list-item">
    <div class="my-container record-content list-row list-item-title">
    // etcetera
`

let html=`
//等等
`

您可以使用。基本上，字符串的开头是backticks/grave重音（`）

html=`
${variable}

`;

您可以使用。基本上，字符串的开头是backticks/grave重音（`）

html=`
${variable}

`;

你能解释一下你想要完成什么吗？你的html是静态的吗？如果是这样的话，为什么不直接使用html呢？如果不是，为什么会有这么多的连接？制作利用

document.createElement

或使用

tags+replace的抽象方法你能解释一下你想要实现什么吗？你的html是静态的吗？如果是这样的话，为什么不直接使用html呢？如果不是，为什么会有这么多的连接？制作利用

document.createElement

或使用

标记+替换的抽象方法另一个后续问题是，使用像react这样的高级框架是否有助于减少这种情况？我觉得它不太优雅：）这要看情况了。React也可能以更复杂的方式非常不雅。但看起来您正在加载可以转换为组件的html。如果您通过Ajax返回大量组件，那么react可能会帮助您构建和管理组件。另一个后续问题是，使用react这样的高级框架是否有助于减少这种情况？我觉得它不太优雅：）这要看情况了。React也可能以更复杂的方式非常不雅。但看起来您正在加载可以转换为组件的html。如果您通过Ajax返回大量组件，那么react可能会帮助您构建和管理组件。