Embed an array within a div using JavaScript

Question

Embed an array within a div using JavaScript

I'm looking to make a small adjustment to this code, acknowledging that it's far from perfect. Instead of simply writing the array contents into a single div, I'd like to create a new div for each number in the array and then add it to the card 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]);
    }

}

javascript arrays

Answer 1

Answer №1

One straightforward approach is to refrain from directly appending to the div and append to a variable instead, as shown below:

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

Answer 2

One straightforward approach is to refrain from directly appending to the div and append to a variable instead, as shown below:

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

Answer 3

Answer №2

If you want to avoid messy string concatenation, you can achieve the desired result easily by utilizing document.createElement("div") in conjunction with appendChild()

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

Check out this jsfiddle example.

This approach will eliminate the need for complex string manipulation.

Answer 4

If you want to avoid messy string concatenation, you can achieve the desired result easily by utilizing document.createElement("div") in conjunction with appendChild()

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

Check out this jsfiddle example.

This approach will eliminate the need for complex string manipulation.

Answer 5

Answer №3

One way to achieve this is by using element.createChild() in conjunction with element.appendChild().

Answer 6

One way to achieve this is by using element.createChild() in conjunction with element.appendChild().

Answer 7

Answer №4

Give this a shot


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

$("#container").html(whole_list);

Answer 8

Give this a shot


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

$("#container").html(whole_list);

Answer 9

Answer №5

One way to dynamically generate a div is by using the code

var div = document.createElement('div')

. After that, you can attach the values from an array iteration to a newly created node with the code

var node = document.createTextNode(value[i])

. The next step would be to save the dynamically generated DOM element in a variable like `div`. This same process can be repeated for the dynamic node. Finally, you can link the node to the DOM element by using div.appendChild(node), and then add the entire element to its Parent Element.

Answer 10

One way to dynamically generate a div is by using the code

var div = document.createElement('div')

. After that, you can attach the values from an array iteration to a newly created node with the code

var node = document.createTextNode(value[i])

. The next step would be to save the dynamically generated DOM element in a variable like `div`. This same process can be repeated for the dynamic node. Finally, you can link the node to the DOM element by using div.appendChild(node), and then add the entire element to its Parent Element.

Answer 11

Answer №6

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

To display each number in a separate div, simply enclose each number within <div></div> tags.

Check out the code on jsFiddle: http://jsfiddle.net/UjsgY/

Answer 12

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

To display each number in a separate div, simply enclose each number within <div></div> tags.

Check out the code on jsFiddle: http://jsfiddle.net/UjsgY/

Answer 13

Answer №7

Is this how you want it?

numbersList = [];
for (var j=0;j<90;j++) numbersList[j]=(j+1);

function fetchNumbers(){
  var player2 = new Array();
  numbersList.sort( function() { return Math.random() - .25 } );
  var cardHolder = document.getElementById("cardContainer")
  var element;
  for ( var k=1; k<=12; k++ ) { 
    player2.push(numbersList[k]);
    element = document.createElement('div');
    element.innerHTML=numbersList[k];
    cardHolder.appendChild(element)
  }
}

Answer 14

Is this how you want it?

numbersList = [];
for (var j=0;j<90;j++) numbersList[j]=(j+1);

function fetchNumbers(){
  var player2 = new Array();
  numbersList.sort( function() { return Math.random() - .25 } );
  var cardHolder = document.getElementById("cardContainer")
  var element;
  for ( var k=1; k<=12; k++ ) { 
    player2.push(numbersList[k]);
    element = document.createElement('div');
    element.innerHTML=numbersList[k];
    cardHolder.appendChild(element)
  }
}

Answer 15

Answer №8

It seems like you are trying to generate a div for each item in the array. Have you ever heard of using array.join()? In order to contain the elements, you will need a container. I can help by creating one and then generating individual divs using array.join().

var container = document.createElement('div');
//A string that includes multiple divs with Array elements.
container.innerHTML = '<div>' + balls90.join('</div><div>') + '</div>';  
//Appending the div to the end of the body to minimize DOM refreshes
document.body.appendChild( container );

Answer 16

It seems like you are trying to generate a div for each item in the array. Have you ever heard of using array.join()? In order to contain the elements, you will need a container. I can help by creating one and then generating individual divs using array.join().

var container = document.createElement('div');
//A string that includes multiple divs with Array elements.
container.innerHTML = '<div>' + balls90.join('</div><div>') + '</div>';  
//Appending the div to the end of the body to minimize DOM refreshes
document.body.appendChild( container );

Answer 17

Answer №9

// There are many different methods for achieving this, here's one more

let newDiv = document.createElement('div');
let textNode = document.createTextNode('1');
let counter = 1;
let tempContainer = document.createDocumentFragment();
newDiv.appendChild(textNode);
tempContainer.appendChild(newDiv);

while(counter < 90){
    let copyDiv = newDiv.cloneNode(true);
    copyDiv.firstChild.data = ++counter;
    tempContainer.appendChild(copyDiv);
}

document.getElementById("cardContainer").appendChild(tempContainer);

Answer 18

// There are many different methods for achieving this, here's one more

let newDiv = document.createElement('div');
let textNode = document.createTextNode('1');
let counter = 1;
let tempContainer = document.createDocumentFragment();
newDiv.appendChild(textNode);
tempContainer.appendChild(newDiv);

while(counter < 90){
    let copyDiv = newDiv.cloneNode(true);
    copyDiv.firstChild.data = ++counter;
    tempContainer.appendChild(copyDiv);
}

document.getElementById("cardContainer").appendChild(tempContainer);

Embed an array within a div using JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Similar questions

Did I accidentally overlook a tag for this stylish stripe mesh Gradient design?

Displaying items from an array is made easy thanks to the combination of mapGetters, VUEJS, vuex, and vuetify

Are there alternative methods for handling routes in React, other than using the react-router-dom@latest library?

Utilizing Node.js callback for validating JWT tokens

Is there a way to ensure that a statement will not execute until the completion of a preceding function?

File handling in Angular 2 using Typescript involves understanding the fundamental syntax for managing files

Passport Authentication does not initiate a redirect

Assigning properties to the constructor using `this.prop`

Forbidden access error in codeigniter with Ajax request 403

Converting an Array into a String

What is the best way to integrate database information into the array shown below?

Obtain documents from one folder, analyze files in a different location, and then correlate files with their respective contents

Tips for transferring a value from a Next.js route to a physical component

Deciphering unidentified Json data

Exploring the functionality of arrays within Selenium IDE

Automatic Textbox Closer

Utilizing reactjs (MERN stack) to dynamically update content on a single page based on both URL parameters and database queries

I'm trying to find a way to access a particular field within an HTML document using JavaScript in Node.js. Can anyone

Even though I am aware that the variable AJAX is attempting to return is not empty, it is still returning 'undefined'

Fetch Timeout Issue in React Native