您如何像在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的数量。

这是一个演示

Answer 2

您可以像这样动态创建元素。

https://jsfiddle.net/scheda/5p5nhdxh/

var thing = document.getElementById('thing');
var things = [1,2,3,4,5];

things.forEach(function(v) {
    thing.innerHTML += "<li>" + v  +"</li>";
});