javascript - 如何在 html 上以列表形式显示 firebase 查询结果？

Question

我正在开发一个 js、html 和 firebase webapp。

我正在尝试从 firebase 获取分数列表并在 html 上显示它们。

我认为我的查询有效，但我无法在 html 上显示结果。

我首先尝试了一段适用于视频的代码，但它对我不起作用 (https://www.youtube.com/watch?v=NcewaPfFR6Y)

(html)

    <p>
        <ol id ="scorelist">
        </ol>
    </p>

(js)

function gotData(data) {
    var scores = data.val();
    var keys = Object.keys(scores);
    for (var i = 0; i < keys.length; i++) {
        var k = keys[i];
        var score = scores[k].score;
        var li = createElement('li', score);
        li.parent('scorelist');
    }
}

我收到错误 createElement 未定义。当我尝试 document.createElement 时，li.parent('scorelist') 不起作用，我收到错误 li.parent is not a function。

然后我尝试了类似的方法，但也没有成功。

var scorelist = document.querySelector('#scoreslist')

function gotData(data) {
    var scores = data.val();
    var keys = Object.keys(scores);
    for (var i = 0; i < keys.length; i++) {
        var k = keys[i];
        var score = scores[k].score;
        var li = document.createElement('li', score);
        scorelist = li.textContent;
    }
} 

我真的被这个问题困住了!我将不胜感激，谢谢!

Answer 1

我添加了一个带有注释的示例，可以向您解释我所做的事情。

function gotData() {
      // you had typo on the id, make sure you select the correct element.
      const scorelist = document.querySelector("#scorelist");
    
      var scores = { first: { score: 1 }, second: { score: 2 } };
      var keys = Object.keys(scores);
    
      for (var i = 0; i < keys.length; i++) {
        var k = keys[i];
        var score = scores[k].score;
        // first, create the element
        const newListItem = document.createElement("li", score);
        // and then, set the score as textContent of the newListitem.
        newListItem.textContent = score;
        // finally you should add the newListItem to the list parent element.
        scorelist.appendChild(newListItem);
      }
    }