我发现代码按我的预期工作(我想)。但我打印数据的最后一步感觉不对。我连接html和js的方式似乎有点不对劲。有没有更好的方法来连接这个?我是否使用了错误的解决方案来打印数据?
//我在数组中使用的列表。

    const myList = {
        Germany : {name : 'Germany', capital: 'Berlin', visited: 'Checked' },
        Italy : {name : 'Italy', capital: 'Rome', visited: 'Checked' },
        Spain : {name : 'Spain', capital: 'Madrid', visited: 'unchecked' },
    }

//我的阵列
    const destinations = [];

//将数据从myList推送到目标数组。
    for(var key in myList) {
        destinations.push(myList[key]);
    }

//这就是在页面上写下我的数据的方法。
    for (var i = 0; i < destinations.length; i++) {
    document.write("<li><h1>" + destinations[i].name + "</h1><p>" +
                   destinations[i].capital +
                   "<input type='checkbox'" + destinations[i].visited + ">")
    };

这是我打算在最后写的。
<li class="all-destinations">
    <h3>destinations[i].name</h3>
    <div class="container">
        <label class="switch">
        <input type="checkbox" destinations[i].visited>
        </label>
    </div>
    <p>destinations[i].capital</p>
    <hr>
</li>

最佳答案

您可以直接将值赋给innerHTML属性,而不必document.write,如果页面已满,则这可能不起作用。

function getItems({ name, capital, visited }) {
    return `<li class="all-destinations">
        <h3>${name}</h3>
        <div class="container">
            <label class="switch">
                <input type="checkbox" ${visited}>
            </label>
        </div>
        <p>${capital}</p>
        <hr>
    </li>`;
}


const myList = { Germany: { name: 'Germany', capital: 'Berlin', visited: 'Checked' }, Italy: { name: 'Italy', capital: 'Rome', visited: 'Checked' }, Spain: { name: 'Spain', capital: 'Madrid', visited: 'unchecked' } };

document.getElementById('list').innerHTML += Object.values(myList).map(getItems).join('');

<ul id="list"></ul>

10-05 21:01
查看更多