如何使用 for 循环在 DOM 中创建多个元素？

Question

好吧，我想要得到的结果是我的div 元素应该与数组 具有相同数量的p 元素。

为了做到这一点，我尝试使用for loop，但它只是创建一个 p 元素，所以我没有工作。

任何人都知道如何做到这一点？ （我刚学js）。

const diccionario = () => {
    var dama = ["bird:pajaro", "car:carro", "house:csa", "camis"];

    document.getElementById("dic").addEventListener("click", () => {
        var pes = document.createElement("p");
        for(var i = 0;  i < dama.length; i++){
            pes.innerHTML = dama[i];
            document.getElementById("cuadro").appendChild(pes);     
        }
    })
}

Answer 1

您需要在循环内创建元素。如果您在循环之外创建它，那么当您调用appendChild 时，它将从之前在 DOM 中的任何位置中删除：

const diccionario = () => {
    var dama = ["bird:pajaro", "car:carro", "house:csa", "camis"];

    document.getElementById("dic").addEventListener("click", () => {
        for(var i = 0;  i < dama.length; i++){
            var pes = document.createElement("p"); // <----------------
            pes.innerHTML = dama[i];
            document.getElementById("cuadro").appendChild(pes);     
        }
    })
}

appendChild 不会创建现有元素的副本 - 相反，它只是附加现有元素。