为啥我们不能直接在循环中使用“innerHTML”函数而不是连接文本以获得垂直书写列表？

Posted 2023-05-07

【中文标题】为啥我们不能直接在循环中使用“innerHTML”函数而不是连接文本以获得垂直书写列表？

【英文标题】：why we cannot use "innerHTML" function directly in loop instead of concatenating the text in order to get a vertical written list?为什么我们不能直接在循环中使用“innerHTML”函数而不是连接文本以获得垂直书写列表？

【发布时间】：2020-10-10 19:45:03

【问题描述】：

为什么我们不能直接在循环中使用“innerhtml”函数而不是连接文本以获得垂直的书面列表？

const pk = document.getElementById('pk');

function validation()
    var word = document.getElementById('name').value;
    var arr = word.split(" ");
    var i;
    for (i = 0; i < arr.length; i++)
        console.log(i);
        let boko = document.createElement('div');
        boko.setAttribute('id', 'boko');
        pk.appendChild(boko);
        document.getElementById("boko").innerHTML = i;
    

这里我没有得到 0 1 2 3 的输出，而是我只得到 3... 我替换了" text += "The number is " + i + "<br>";" 这个声明.. 但它似乎不起作用请帮我解决问题。

【问题讨论】：

您正在创建多个 ID 为“boko”的元素，这就是它不起作用的原因。您可以删除 boko.setAttribute('id', 'boko'); 并将 document.getElementById("boko").innerHTML = i; 替换为 boko.innerHTML = i; （您已经在 boko 变量中有 div 元素，您不需要再次使用 document.getElementById 获取它）

我希望我的输出在垂直部分中显示为不同 div 中的每个数字，我在 console.log 中得到了正确的答案，但在这里我也只得到最终输出单个 div。

【参考方案1】：

您已经拥有对您的div 的引用，因此您无需为其分配id——您可以直接设置它的innerHTML。

const pk = document.getElementById('pk');

function validation() 
    var word = document.getElementById('name').value;
    var arr = word.split(" ");
    for (var i = 0; i < arr.length; i++)
        let boko = document.createElement('div');
        boko.innerHTML = i;
        pk.appendChild(boko);
    

查看documentation 中的createElement(...)——它返回一个HTMLElement，您可以直接修改它（至少在createElement('div') 的情况下）