Using a for loop to cycle through an array and generate sibling div elements

Question

Using a for loop to cycle through an array and generate sibling div elements

I'm attempting to display the content of the gameTwo array in two child divs under the game2 element. However, the issue I'm facing is that the loop creates a child of a child on the second iteration. Could someone provide guidance on how I can adjust this code to ensure that both divs are siblings?

var gameTwo = ['Kansas', 'Villanova']

var gameTwoText = '';
    for (i = 0; i < gameTwo.length; i++) {
        gameTwoText += "<div>" + gameTwo[i];
    }
var secondGame = document.getElementById('game2').innerHTML = gameTwoText;

javascript arrays

Answer 1

Answer №1

Make sure to include a closing tag for each div element - like this:

gameTwoText += "<div>" + gameTwo[i] + "</div>";

If you don't add the </div>, the first div won't be properly closed and each subsequent one will be nested within the previous one.

Answer 2

Make sure to include a closing tag for each div element - like this:

gameTwoText += "<div>" + gameTwo[i] + "</div>";

If you don't add the </div>, the first div won't be properly closed and each subsequent one will be nested within the previous one.

Answer 3

Answer №2

To ensure proper execution, be sure to properly close the DIV tag within the loop. Alternatively, you can opt for a more traditional approach by dynamically creating the elements using the DOM:

var secondGame = document.getElementById('game2');
var gameTwo = ['Kansas', 'Villanova'];
var div = null;
for (var i = 0, len = gameTwo.length; i < len; i++) {
    div = document.createElement('div');
    div.appendChild(document.createTextNode(gameTwo[i]));
    secondGame.appendChild(div);
}

Answer 4

To ensure proper execution, be sure to properly close the DIV tag within the loop. Alternatively, you can opt for a more traditional approach by dynamically creating the elements using the DOM:

var secondGame = document.getElementById('game2');
var gameTwo = ['Kansas', 'Villanova'];
var div = null;
for (var i = 0, len = gameTwo.length; i < len; i++) {
    div = document.createElement('div');
    div.appendChild(document.createTextNode(gameTwo[i]));
    secondGame.appendChild(div);
}

Using a for loop to cycle through an array and generate sibling div elements

Answer №1

Answer №2

Similar questions

Preventing access to websites through a web application using JavaScript

Node.js HTTP request not returning any content in the body/message

steps for setting up babel-cli and babel-preset-react

Retrieve the data from an HTTP Request using AngularJS

AngularJS ng-repeat with dynamic ng-model is a powerful feature that allows for

Ways to confirm the actual openness of Express app's connection to MongoDB?

Convert a 3-dimensional Numpy array into a 2-dimensional array by taking only the outermost index

Audio playback system in Node.js

Turning a string array into a basic array can be achieved through a few simple steps

What is the best way to navigate to a new webpage after clicking a button?

add before the beginning and after the end

Creating a form submission event through Asp.net code behind

Limiting click event to only Image component in Next.js

Utilizing React and Material-UI to Enhance Badge Functionality

How to Retrieve Nested Arrays from a Database Using Codeigniter

Can a variable's value be altered within an array?

What is the best method to retrieve the initial elements from an array before proceeding to fetch the subsequent ones?

Discovering a way to showcase every event a user is linked to, employing Fullcalendar Rails

Form_Open will automatically submit - Ajax Submission in CodeIgniter

Combining Asynchronous and Synchronous Operations in a Function: Using Cache and Ajax Requests in JavaScript