只使用js对数据生成表单

分析

        利用js数据生成表单，可以想象最主要的便是对追加 append（）方法的使用。当然要动态追加必不可少的肯定是先创建元素，再进行追加。

        这里我们使用了document.createElement("input")来创建input元素，然后将input追加上去$("form").append(input)。

这样我们就追加了一条表单元素。

        要想根据数据来生成，我们不妨利用数组和对象的特性，将数据根据键值对存在对象中在将其放在数组中。用循环将数组遍历，有多少数据，就循环多少次，并且随之创建和追加元素。然后根据数组的索引值再和每次创建追加的元素进行对应，键对应input的名称，值对应input框里的值，这个时候我们就已经完成了。

具体js代码如下：

for (var i = 0; i < (datas.length);i++ ){

    let div = document.createElement("div")

    let ipt = document.createElement("input")

    let p = document.createElement("p")//循环创建input

    $("form").append(div);  //将input和p都装在div盒子里，方便设置样式

    $(div).append(ipt)// 追加input

    $(ipt).before(p)

    p.innerHTML = datas[i].name  //将属性名和值赋给每个input

    ipt.value = datas[i].value;

}