Javascript 将javascript数组转换为div

javascript array into a div

提问by paul

I just need a little tweak, I know all this code isn't perfect (far from it). Instead of writing the contents of the array into a div, I ideally want to create a new div for each number in the array and then add it to the card container?

我只需要稍微调整一下，我知道所有这些代码都不完美（远非如此）。理想情况下，我不想将数组的内容写入 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' ];

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

}

回答by Belinda

Simple method, instead of appending to the div try appending to a variable, something like

简单的方法，而不是追加到 div 尝试追加到一个变量，像

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

回答by Mark Coleman

You can easily use document.createElement("div")and appendChild()

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

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

Example on jsfiddle.

jsfiddle上的示例。

Using this method will get you away from having to worry about yucky string concatenation.

使用此方法将使您不必担心令人讨厌的字符串连接。

回答by 08Hawkeye

You can accomplish this with element.createChild() and element.appendChild().

您可以使用 element.createChild() 和 element.appendChild() 完成此操作。

回答by jsb9009

Try this

尝试这个

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

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

回答by Allan

Dynamically create a div with var div = document.createElement('div')and append the array iteration (values) to a dynamically created node var node = document.createTextNode(value[i]). Just store the dynamically created DOM-Element into a variable like var div. You can do the same to the dynamically created node. Then you can append the node to the DOM-Element with div.appendChild(node)and append the whole to the Parent Element.

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

回答by Drew

If I understand correctly, you want to create a div for each element in the array. You may (not) be familiar with array.join(). You will need a container to put the contents in, I will create one then create the individual divs with array.join().

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

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

回答by kennebec

// Lots of ways to do this, here's another

// 有很多方法可以做到这一点，这是另一种

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

回答by Rocket Hazmat

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

If you want each number in its own div, just wrap each number in <div></div>

如果你想要每个数字都有自己的div，只需将每个数字包裹起来<div></div>

jsFiddle: http://jsfiddle.net/UjsgY/

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

回答by mplungjan

Like this?

像这样？

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