JS动态添加div，然后在div中添加元素

需求：

组织部中有个这样的需求，根据年份动态显示该年份下的定性指标！

我的做法：

先是放一个空的div，让后根据指标的数据，动态的往div中添加元素。

代码：

空的div，存放定性指标

1. <div id="DvelopmentTarget">     </div>

<div id="DvelopmentTarget">     </div>

动态往div中添加元素：

1. for (var n = 0; n < data.length; n++)
2. {
3. //获取div
4. var div = document.getElementById("DvelopmentTarget");
5. //换行
6. var br = document.createElement("br");
7. div.appendChild(br);
8. //添加label ，存放指标名称
9. var div2 = document.createElement("label");
10. div2.innerText = data[n].QualitativeTargetName;
11. div.appendChild(div2);
12. //添加text ，存放指标权重
13. var input = document.createElement("input");
14. input.setAttribute('type', 'text');
15. input.setAttribute('ReadOnly', 'True');  //设置文本为只读类型
16. input.value = data[n].DevelopmentAllWeight
17. div.appendChild(input);
18. //添加select 存放指标id
19. var targetID = document.createElement("select");
20. targetID.innerText = data[n].QualitativeTargetID;
21. targetID.setAttribute('hidden', 'hidden');
22. div.appendChild(targetID);
23. //添加 %(单位百分比)
24. //换行
25. var br = document.createElement("br");
26. div.appendChild(br);
27. }

for (var n = 0; n < data.length; n++)
        {
           //获取div
            var div = document.getElementById("DvelopmentTarget");
        //换行
        var br = document.createElement("br");
        div.appendChild(br);

        //添加label ，存放指标名称
        var div2 = document.createElement("label");
        div2.innerText = data[n].QualitativeTargetName;
        div.appendChild(div2);

        //添加text ，存放指标权重
        var input = document.createElement("input");
        input.setAttribute('type', 'text');
        input.setAttribute('ReadOnly', 'True');  //设置文本为只读类型
        input.value = data[n].DevelopmentAllWeight
        div.appendChild(input);

        //添加select 存放指标id
        var targetID = document.createElement("select");
        targetID.innerText = data[n].QualitativeTargetID;
        targetID.setAttribute('hidden', 'hidden');
        div.appendChild(targetID);
        //添加 %(单位百分比)

        //换行
        var br = document.createElement("br");
        div.appendChild(br);
    }

用到的知识点：

创建子节点、  父元素动态添加子元素：

1. div2.innerText = data[n].QualitativeTargetName;
2. div.appendChild(div2);

div2.innerText = data[n].QualitativeTargetName;
div.appendChild(div2);

设置元素属性：

1. input.setAttribute('ReadOnly', 'True');  //设置文本为只读类型

input.setAttribute('ReadOnly', 'True');  //设置文本为只读类型

清楚div下的所有元素：

1. div.innerHTML = "";

div.innerHTML = "";

来张大图，再次总结下DOM（文档对象模型）

总结：学习是个不断反复的过程！