使用 createElemnt 在 JS 中添加多个 div [重复]答案

【问题标题】：adding multiple div in JS using createElemnt [duplicate]使用 createElemnt 在 JS 中添加多个 div [重复]
【发布时间】：2018-07-09 14:33:09
【问题描述】：

这是我的代码：

var div4=document.getElementById('div4'); // get the div element
var div2=document.getElementById('div2'); // create a new div
for (var index = 0; index < array.length; index++) {
    var newDiv=document.createElement("div"); //create a new div
    var newDiv2=document.createElement("div") //create a new div
    newDiv.innerHTML=array[index];
    newDiv.draggable = true;
    newDiv.id = 'record-2-'+index;
    newDiv.className = 'record';
    newDiv2.className = 'record';
    newDiv2.id = 'record-4-'+index;
    newDiv2.draggable = true;
    newDiv2.innerHTML=array[index];
    div4.appendChild(newDiv); // append to div
    div2.appendChild(newDiv2); // append to div
    newDiv.addEventListener("dragstart", handleDragStart);
    newDiv2.addEventListener("dragstart", handleDragStart);
}

如何在没有两个单独的变量 newDiv、newDiv2 的情况下实现相同的功能。

【问题讨论】：

你的最终目标是什么？
这个不太清楚知道吗，请详细说明。
使用函数developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions

标签： javascript

【解决方案1】：

您可以克隆 div 并使用 cloneNode() 添加它，因此您添加的是两个单独的 div，而不是同一个。

var div4=document.getElementById('div4'); // get the div element
var div2=document.getElementById('div2'); // create a new div
for (var index = 0; index < array.length; index++) {
    var newDiv=document.createElement("div"); //create a new div
    newDiv.innerHTML=array[index];
    newDiv.draggable = true;
    newDiv.id = 'record-2-'+index;
    newDiv.className = 'record';

    div4.appendChild(newDiv); // append to div
    newDiv = newDiv.cloneNode(false); // clone the div
    newDiv.id = 'record-4-'+index; // change its id property
    div2.appendChild(newDiv); // append to div
    newDiv.addEventListener("dragstart", handleDragStart);
    newDiv2.addEventListener("dragstart", handleDragStart);
}

【讨论】：

【解决方案2】：

您可以创建一个返回或将 div 添加到传递的 div 的函数：

//Required..
function handleDragStart(){};

//Created and append divs
function addDivTo(div, html, id){
    //appendChild() returns the input
    var newDiv = div.appendChild(document.createElement("div")); //create a new div
    newDiv.id = id;
    newDiv.innerHTML = html;
    newDiv.draggable = true;
    newDiv.className = 'record';
    newDiv.addEventListener("dragstart", handleDragStart)
  }

//Some array used below
var array = ['123', '456', '789', 'cucubau'];

var div4 = document.getElementById('div4'); // get the div element
var div2 = document.getElementById('div2'); // create a new div

for (var index = 0; index < array.length; index++) {
  addDivTo(div4, array[index], 'record4-' + index);
  addDivTo(div2, array[index], 'record2-' + index)
}

<div id = 'div4'></div>
<div id = 'div2'></div>

【讨论】：