《前端》JS动态添加div，然后在div中添加元素-2020年10月5日

本文介绍如何在前端使用JavaScript动态添加div并插入元素。通过获取ID为'DvelopmentTarget'的div，创建新的input元素，然后利用appendChild方法将input元素添加到div中。文章还涉及设置节点值、元素属性、清除div内容以及使用insertBefore方法插入子节点的知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

动态往div中添加元素：

基本思路是：

先使用 var div = document.getElementById("DvelopmentTarget");

var input = document.createElement("input"); 创建两个元素（父元素和子元素），

再用appendChild（）方法，把子元素塞到父元素中 div.appendChild(input);

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、往某个元素中添加子元素--appendChild与insertBefore可以把元素插入到DOM树中：

div.appendChild(div2);

3、设置元素属性：

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

4、清除div下的所有元素：

div.innerHTML = "";

5、insertBefore(newItem,existingItem) 方法在您指定的已有子节点之前插入新的子节点。

dom图：