JavaScript数组转化为div

Question

我只需要稍微调整一下，我知道所有这些代码都不完美（离完美还很远）。我希望为数组中的每个数字创建一个新的div，然后将其添加到卡片容器中，而不是将数组的内容写入div中。

balls90 = [ '1', '2', '3', '4', '5', '6','7','8','9','10','11', '12', '13', '14', '15', '16','17','18','19','20','21', '22', '23', '24', '25', '26','27','28','29','30','31', '32', '33', '34', '35', '36','37','38','39','40','41', '42', '43', '44', '45', '46','47','48','49','50','51', '52', '53', '54', '55', '56','57','58','59','60','61', '62', '63', '64', '65', '66','67','68','69','70','71', '72', '73', '74', '75', '76','77','78','79','80','81', '82', '83', '84', '85', '86','87','88','89','90' ];

function getNumbers(){

    var player1 = new Array();

    balls90.sort( function() { return Math.random() - .25 } );

    for ( var i=1; i<=12; i++ ) {   
        player1.push(balls90[i]);
        document.getElementById("cardContainer").innerHTML+=(balls90[i]);
    }

}

- paul

---

你能详细解释一下你需要什么吗？ - Naftali

Answer 1

简单的方法是，不要将内容附加到div中，而是将其附加到变量中，例如：

var html='';
for (var i=1; i<=12; i++) {
    html+='<div>'+balls90[i]+'</div>';
}
document.getElementById('cardContainer').innerHTML+= html;

- Belinda

Answer 2

您可以轻松使用 document.createElement("div") 和 appendChild()

var div = document.createElement("div");
div.innerHTML = (balls90[i]);
cardContainer.appendChild(div);

在jsfiddle的示例中。

使用这种方法可以避免为难的字符串拼接问题。

- Mark Coleman

Answer 3

尝试一下。

                var full_list = "";
                for(var i=0; i<balls90.length; ++i){
                    full_list = full_list + balls90[i]+ "<br>";
                } 

                $("#cardContainer").html(full_list);

- Ragnar921

Answer 4

你可以使用 element.createChild() 和 element.appendChild() 来完成这个任务。

- 08Hawkeye

Answer 5

使用var div = document.createElement('div')动态创建一个div，并将数组迭代（值）附加到动态创建的节点var node = document.createTextNode(value[i])。只需将动态创建的DOM元素存储到变量中，如var div。您可以对动态创建的节点执行相同的操作。然后，您可以使用div.appendChild(node)将节点附加到DOM元素，并将整个元素附加到父元素中。

- Allan

Answer 6

document.getElementById("cardContainer").innerHTML += ('<div>'+balls90[i]+'</div>');

如果您想让每个数字单独位于一个 div 中，请将每个数字用<div></div> 包裹起来。

jsFiddle链接：http://jsfiddle.net/UjsgY/

- gen_Eric

Answer 7

像这样吗？

balls90 = [];
for (var i=0;i<90;i++)balls90[i]=(i+1);

function getNumbers(){
  var player1 = new Array();
  balls90.sort( function() { return Math.random() - .25 } );
  var container = document.getElementById("cardContainer")
  var div;
  for ( var i=1; i<=12; i++ ) { 
    player1.push(balls90[i]);
    div = document.createElement('div');
    div.innerHTML=balls90[i];
    container.appendChild(div)
  }
}

- mplungjan

Answer 8

如果我理解正确的话，您想为数组中的每个元素创建一个 div。您可能（不）熟悉 array.join()。您需要一个容器来放置内容，我将创建一个容器，然后使用 array.join() 创建单独的 div。

var container = document.createElement('div');
//A string containing a series of divs and the contents of the Array.
container.innerHTML = '<div>' + balls90.join('</div><div>') + '</div>';  
//append div to body last, to create less DOM refreshes
document.body.appendChild( container ); 

- Drew

Answer 9

// 做这件事有很多方法，这是另一种方法

var div= document.createElement('div'),
txt= document.createTextNode('1'), i= 1, tem,
pa= document.createDocumentFragment();
div.appendChild(txt);
pa.appendChild(div);
while(i<90){
    tem= div.cloneNode(true);
    tem.firstChild.data=++i;
    pa.appendChild(tem);
}
document.getElementById("cardContainer") .appendChild(pa);

- kennebec