如何将循环的 javascript API 数据发送到 html 网页？

Question

我有这个简单的代码，其中有 5 个参数取自记录数据的 API：

for (i = 0; i < arr.length-1; i++) {
        
        console.log('For Calls')
        console.log(arr[i].league.name)
        console.log(arr[i].teams.home.name, arr[i].goals.home)
        console.log(arr[i].teams.away.name, arr[i].goals.away)
}

它将此数据记录到控制台（显示了 2 组数据）： Logged Data

我遇到的问题是试图将此循环内容显示到网站上，到目前为止，我什至无法使用 .append 方法将其显示在屏幕上。

这是我要创建的格式：

<div class="parentDiv">
    <div class="league">Data goes here</div>
    <div class="team1">Data goes here</div>
    <div class="score1">Data goes here</div>
    <div class="team2">Data goes here</div>
    <div class="score2">Data goes here</div>
</div>

我知道我可以给每个 div 一个 class 并以这种方式附加，但我需要在循环中使用它，所以在这种情况下这些方法对我不起作用。

感谢任何提示。

Answer 1

function append() {

  let arr = [{ name: 'name1', goals: 'goals1' }, { name: 'name2', goals: 'goals2' }, { name: 'name3', goals: 'goals3' }]

  for (i = 0; i < arr.length; i++) {
    let parent = document.createElement("div")
    parent.className = 'parentDiv'

    let newElement = document.createElement("div")
    newElement.className = 'league'
    newElement.innerHTML = arr[i].name
    parent.appendChild(newElement)

    let newElement2 = document.createElement("div")
    newElement2.className = 'goals'
    newElement2.innerHTML = arr[i].goals
    parent.appendChild(newElement2)

    document.body.appendChild(parent)

  }

}

如何将循环的 javascript API 数据发送到 html 网页？

how to send looped javascript API data to the html webpage?

html

javascript

api

jquery

dom