javascript - 如何像在 Jade 中那样在 JS/HTML 中创建动态循环？

Question

我用 html 编写了所有显示代码，并添加了真正特定的属性和内容，不幸的是，我所有显示显示模板的教程都只显示了 Jade。

我想用 HTML 和 Javascript 来实现。

我该怎么做

ul
  each val in [1, 2, 3, 4, 5]
    li= val

在 HTML/JS 中？

它是否比仅使用一个 for 循环(当标签低于我从数据库中提取的 x 变量时将标签作为字符串推送)更复杂，或者我是否遗漏了某些内容？

在学习时，我希望保持我的抽象不高于 Javascript、HTML、CSS、Node.js 和 Mongodb。

Answer 1

您可以纯粹通过 JavaScript 来完成此操作。

首先简单写一个

function call(n){

    //Accessing the ul element
    var main = document.getElementById("main");

    for(var i=0;i<n;i++){
        var child = document.createElement("li");

        //if you want to add data to your li
        child.innerHTML = i+1;

        //appending the child to the main ul
        main.appendChild(child);
    }

}

此处，“n”是您要生成的 li 数量。

Here is a demo