如何附加包含函数的变量[重复]

Question

我创建了一个对象数组和一个在创建组件时循环该数组的函数，我试图将组件附加到 HTML 中的 div，但我不断收到以下错误：app.js:722 Uncaught TypeError：无法读取 null 的属性“追加”

还有没有办法将“方法”组件附加到不同的 div 中？

有人可以帮忙吗？我想知道如何在 vanilla Javascript 中做到这一点。

let internationalCountries = [
    {
        name: "Hermes",
        method: "Standard Delivery",
        timmeScale: "Delivery within 5 to 7 working days",
    },
    {
        name: "USP",
        method: "Standard Delivery",
        timmeScale: "Delivery within 1 to 2 working days",
    },
    {
        name: "DPD",
        method: "Standard Delivery",
        timmeScale: "Delivery within 11 to 21 working days",
    },
]

let renderCountryList = () => {
    let itemName = "";
    let method = "";
    
    for (let i = 0; i < internationalCountries.length; i++){
        itemName += '<li class="country">'+ internationalCountries[i].name +'</li>';
        method += '<div class="delivery-info"> <p>' + internationalCountries[i].method + '</p> <p>' + internationalCountries[i].timmeScale + '</p> </div>';
    }
    return itemName, method;
    
}
renderCountryList()

let list = document.querySelector('.country-list')
let countryList = renderCountryList();
console.log(countryList)
list.append(countryList)

<div>
   <ul class="country-list">
                                
   </ul>
</div>

Answer 1

您是在 HTML 之前执行 javascript 吗？通常，如果元素尚未渲染，您会收到此错误。

尝试将 javascript 放在 HTML 文件末尾的各种元素之后。