使用fetch（）

Question

我想在HTML中运行一个脚本，该脚本根据从API调用获得的响应生成一些HTML元素，并将其插入div的innerHTML中。问题是当我单独运行脚本并使用console.log（）结果时，我可以看到HTML元素已成功生成。但是当我尝试用HTML运行脚本时，它无法编辑结构。这是脚本：

const fetch = require("node-fetch");
fetch('http://localhost:5000/sampleRoute/sampleParameter')
    .then(function(res){
        return res.json();
    })
    .then(function(data){
        let resultList = createResultList(data);
        //console.log(resultList);
        document.getElementById('sampleID').innerHTML = resultList;
    });

HTML：

    <div id="sampleID"></div>
    <script type="text/javascript" src="sampleScript.js"></script>

如果我隔离运行脚本并在console.log resultList中运行

，会发生什么

            <div>
                <p>BayID: 2495</p>
                <h4>Distance: 221.4507100415552</h4>
                <h4>Parking Type + Disability Ext: 1P Meter</h4>
                <p>Disability Extension: 120</p>
            </div>
            <div>
                <p>BayID: 2497</p>
                <h4>Distance: 228.83722816851767</h4>
                <h4>Parking Type + Disability Ext: 1P Meter</h4>
                <p>Disability Extension: 120</p>
            </div>
            <div>
                <p>BayID: 2501</p>
                <h4>Distance: 239.1268407711393</h4>
                <h4>Parking Type + Disability Ext: 1P Meter</h4>
                <p>Disability Extension: 120</p>
            </div>

因此，该列表已成功生成，但是当我尝试用上述列表替换innerHTML时，该列表不起作用。我还注意到，尝试在fetch块之外替换innerHTML可以很好地工作，所以fetch本身可能有问题吗？

编辑：这是由于有人要求创建的createResultList函数

function createResultList(data) {
    let output = '';
    data.forEach(function (item) {
        output += createResultItem(item);
    });
    return output;
}

function createResultItem(item){
    let columnNum = chooseColumn(item);
    let features = generateFeatures(item, columnNum);

    let result = `
            <div>
                <p>BayID: ${item.spot.BayID}</p>
                <h4>Distance: ${item.distance_to_target}</h4>
                <h4>Parking Type + Disability Ext: ${features.TypeDesc}</h4>
                <p>Disability Extension: ${features.DisabilityExt}</p>
            </div>`;
    return result;
}

它所做的就是使用API​​调用返回的json数组返回一些HTML