Javascript array in div

Question

I just need to adjust a bit, I know that all this code is not perfect (far from it). Instead of writing the contents of the array in a div, I ideally want to create a new div for each number in the array and then add it to the map container?

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

Answer 1

A simple method, instead of adding a div to the application, adding to the variable, something like

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

Answer 2

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

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

Jsfiddle example.

Using this method saves you from having to worry about yucky string concatenation.

Answer 3

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

Answer 4

try it

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

Answer 5

Dynamically create a div with var div = document.createElement('div') and add an iteration of the array (value) to the dynamically created node var node = document.createTextNode(value[i]) . Just save the dynamically created DOM element to a variable like var div. You can do the same with dynamically created node. Then you can add node to the DOM element using div.appendChild(node) and add an integer to the parent element.

Answer 6

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

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

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

Answer 7

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

Answer 8

If I understand correctly, you want to create a div for each element of the array. You may (not) be familiar with array.join() . You will need a container to host the content, I will create it and then create separate array.join() with 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 ); 

Answer 9

// Many ways to do this, here are more

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