时间戳

首页 > 解决方案 > JS函数将项目添加到

javascript - JS函数将项目添加到
    在 HTML 文件中

问题描述

我完全是初学者（学习了 1 周......并且在发疯之前已经考虑过退出：D）这是我的第一个问题，所以如果我做错了什么，请告诉我。我正在尝试解决一个关于使用 JS 函数将列表添加到 HTML 文件的小型 Javascript 练习。

我已经创建了这个功能，但它不起作用。我会说问题是我不知道如何在 ".createTextNode()" 中指示波段名称变量。

这是我在 JS 文件中的功能：

function addBands() {
   for (i = 0, i < 0, i++) {
        var banda = document.createElement("LI");
        var nombre= document.createTextNode([0]);
        banda.appendChild(nombre);
        document.getElementById("band-list").appendChild(banda)
   }
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1> MY FAVORITE BANDS</h1>
    
    <ul id="band-list">
        
    </ul>
    
    <script src="exercisesJS.js"></script>
    <script>addBands(['Dire Straits', 'Kansas', 'Steely Dan'])</script>
</body>
</html>

输出应该是一个列表，其中包含函数中 3 个波段的名称，或者任何其他波段（可以是 3 或 6 ...等...

标签： javascripthtml

解决方案

始终检查错误控制台。目前它告诉你

for (i = 0, i < 0, i++) {

是语法错误。你的意思是：

for (i = 0; i < 0; i++) {

这修复了语法。然而，这在逻辑上仍然是错误的，因为这意味着您的循环将永远不会运行（因为迭代器变量i从 0 开始，并被告知在它低于0 时运行，这是一个从一开始就失败的条件。）

查看您的代码，还有其他问题。您将一组乐队名称传递给该函数，但该函数未设置为接收它。所以，我们需要：

function addBands(bands) {

这意味着函数的内部可以访问传递给它的内容。这也意味着我们可以将循环基于通过的带数，并使用迭代器带作为文本输出。

function addBands(bands) { //<-- receive incoming array
    for (i = 0; i < bands.length; i++) { //iterate bands.length times
        var banda = document.createElement("LI");
        var nombre= document.createTextNode(bands[i]); //output iterator band name
        banda.appendChild(nombre);
        document.getElementById("band-list").appendChild(banda)
    }
}

当我们在这里时，我们可以进行其他一些优化。ul首先，每次循环运行时重新查找元素是没有意义的。所以让我们把它缓存在循环之外。其次，虽然createTextNode()很好，但您可能有兴趣知道textContent在父节点上使用它更容易。把它们放在一起：

function addBands(bands) { //<-- receive incoming array
    let ul = document.getElementById("band-list"); //cache UL
    for (i = 0; i < bands.length; i++) {
        var banda = document.createElement("LI");
        banda.textContent = bands[i];
        ul.appendChild(banda)
    }
}

推荐阅读