使用javascript将基于动态值的多个html元素插入到不同的div中

使用javascript将基于动态值的多个html元素插入到不同的div中,javascript,api,Javascript,Api,我在想我需要做什么时有点困难 我正在开发一个小的火车时刻表应用程序,它可以找到最近的五个车站,并调出所有五个车站的时刻表。我已经成功地找到了最近的车站,并设法从每个车站获得了所有服务信息。我使用了每个站点的包装器元素上的数据集,作为向每个包装器插入正确服务信息的一种方式 我现在面临的问题是,目前我将所有service box元素都放在第一个包装器中。是否有办法将服务盒元素插入到正确的div中 我正在使用的API提供了一个独特的3字符电台代码(如FST等),以及我用来查找附近电台的API e、 g

我在想我需要做什么时有点困难

我正在开发一个小的火车时刻表应用程序,它可以找到最近的五个车站,并调出所有五个车站的时刻表。我已经成功地找到了最近的车站,并设法从每个车站获得了所有服务信息。我使用了每个站点的包装器元素上的数据集,作为向每个包装器插入正确服务信息的一种方式

我现在面临的问题是,目前我将所有service box元素都放在第一个包装器中。是否有办法将服务盒元素插入到正确的div中

我正在使用的API提供了一个独特的3字符电台代码(如FST等),以及我用来查找附近电台的API

e、 g我有5个车站,代码为AAA、AAB、AAC、AAD和AAE。所有AAA电台都应使用AAA数据集插入到相应的DIV中,与AAB相同。。。等等

如果你需要知道的话,我正在使用TransportAPI

请参阅我到目前为止的Javascript代码。提前谢谢

//脚本
//如果是http,则将协议更改为https
如果(window.location.protocol!='https:')window.location.protocol='https';
// 
var info=document.querySelector(“.info”);
//使用if语句检查地理定位是否有效/受支持
//如果支持地理定位
if(导航器中的“地理位置”){
//登录到控制台
log(“地理定位正在工作”);
//如果支持地理定位,则要运行的函数
navigator.geolocation.getCurrentPosition(函数(位置){
//商店用户协调
var lat=位置坐标纬度;
var lon=位置坐标经度;
//将它们记录到控制台
log(“您的坐标是:“+lat+”,“+lon”);
//回调函数在另一个函数中使用用户坐标
findNearestStation(纬度、纬度);
});
//如果不支持地理定位
}否则{
//登录到控制台
log(“不支持地理定位”);
}
功能findNearestStation(lat、lon){
log(“您的坐标是:“+lat+”,“+lon”);
//api密钥和令牌
var appID=“xxxxx”;
var appKey=“xxxxxxxxxxx”;
//最近站点url模板的api
var transportApiUrl=”https://transportapi.com/v3/uk/train/stations/near.json?app_id=“+appID+”&app_key=“+appKey+”&lat=“+lat+”&lon=“+lon+”&rpp=5”;
//ajax请求获取最近的站点
var nearbyStationsReq=new XMLHttpRequest();
nearbystationsrq.open('GET',transportapirl,true);
nearbystationsrq.onload=函数(){
//结果窗口
var resultsWindow=document.querySelector(“.results window”);
//时间表URL的空数组
var timetableUrlArray=[];
//站代码的空数组
var StationDearray=[];
//清除结果窗口
resultsWindow.innerHTML=“”;
如果(this.status>=200&&this.status<400){
//响应数据
var res=JSON.parse(this.response);
//响应中的站阵列的变量
var数据=res.站;
//用于循环遍历响应数据
对于(变量i=0;i=200&&this.status<400){
//对请求的响应
var res=JSON.parse(this.response);
//时间表信息数据
var数据=res.deparations.all;
//声明服务结果包装器
var servicesultswapper=document.querySelectorAll(“.servicesultswapper”);
//循环以遍历数据
对于(变量i=0;ilet currentWrapper = [...serviceResultsWrapper].find((wrapper) => wrapper.dataset.stationcode === currentStationCode);
let serviceBoxFragment = document.createRange().createContextualFragment(serviceBoxTemplate);

currentWrapper.appendChild(serviceBoxFragment);