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

需求：

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

 

我的做法：

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

代码：

 空的div，存放定性指标

[html] view plain copy

print ?

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

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

动态往div中添加元素：

[javascript] view plain copy

print ?

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

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);         }

用到的知识点：

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

[csharp] view plain copy

print ?

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

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

设置元素属性：

[csharp] view plain copy

print ?

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

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

清楚div下的所有元素：

[csharp] view plain copy

print ?

1. div.innerHTML = "";  

div.innerHTML = "";

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

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