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

Question

为什么我们不能直接在循环中使用"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>";"这个声明..但似乎它不起作用，请帮我解决问题。

Answer 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);
}
}

查看createElement(...)的文档 - 它返回一个可以直接修改的HTMLElement(至少在createElement('div')的情况下(