JS動態添加div，然后在div中添加元素

需求：

   組織部中有個這樣的需求，根據年份動態顯示該年份下的定性指標！

 

我的做法：

        先是放一個空的div，讓后根據指標的數據，動態的往div中添加元素。

代碼：

 空的div，存放定性指標

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

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

動態往div中添加元素：

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

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

用到的知識點：

    創建子節點、  父元素動態添加子元素：

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

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

設置元素屬性：

input.setAttribute('ReadOnly', 'True');  //設置文本為只讀類型

input.setAttribute('ReadOnly', 'True');  //設置文本為只讀類型

清楚div下的所有元素：

div.innerHTML = "";

div.innerHTML = "";

來張大圖，再次總結下DOM（文檔對象模型）

總結：學習是個不斷反復的過程！