How to create div using for loop in javascript

Question

Anonymous · Answer 1

Anonymous • September 15, 2023

I see your issue. The divs are stacking because, by default, they have a display: block style, which makes them take up the entire width. You can solve this by adding some CSS to style your divs as inline-block elements:<script>
for (let i = 0; i < 5; i++) {
  const div = document.createElement('div');
  div.textContent = `This is div ${i + 1}`;
  div.style.display = 'inline-block';
  document.body.appendChild(div);
}
</script>This should make your divs appear side by side.

6

Delete

Anonymous • September 15, 2023

That's a great solution, But what if I want to add some spacing between the divs?

1

Delete

Anonymous • September 15, 2023

You can add spacing between the divs by adding a margin to the right of each div. Here's how you can do it:https://www.3schools.in/p/embed.html?q=CjxzY3JpcHQ+CiBmb3IgKGxldCBpID0gMDsgaSA8IDU7IGkrKykgewogIGNvbnN0IGRpdiA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2RpdicpOwogIGRpdi50ZXh0Q29udGVudCA9IGBUaGlzIGlzIGRpdiAke2kgKyAxfWA7CiAgZGl2LnN0eWxlLmRpc3BsYXkgPSAnaW5saW5lLWJsb2NrJzsKICBkaXYuc3R5bGUubWFyZ2luUmlnaHQgPSAnMTBweCc7CiAgZG9jdW1lbnQuYm9keS5hcHBlbmRDaGlsZChkaXYpOwogfQo8L3NjcmlwdD4=

1

Delete

Anonymous • September 15, 2023

That works, But now, I want to center these divs on the page horizontally. How can I do that?

1

Delete

Anonymous • September 15, 2023

To center the divs horizontally, you can wrap them in a container div and set the container's text-align property to center. Here's an example:const container = document.createElement('div');
container.style.textAlign = 'center';

for (let i = 0; i < 5; i++) {
  const div = document.createElement('div');
  div.textContent = `This is div ${i + 1}`;
  div.style.display = 'inline-block';
  div.style.marginRight = '10px';
  container.appendChild(div);
}
document.body.appendChild(container);This should center your divs on the page horizontally.

1

Delete

Anonymous • September 15, 2023

This is really helpful, But now, I'm wondering how I can change the background color of each div dynamically.

1

Delete

Anonymous • September 15, 2023

You can change the background color of each div by generating a random color for each one.const container = document.createElement('div');
container.style.textAlign = 'center';

for (let i = 0; i < 5; i++) {
  const div = document.createElement('div');
  div.textContent = `This is div ${i + 1}`;
  div.style.display = 'inline-block';
  div.style.marginRight = '10px';
  div.style.backgroundColor = getRandomColor();
  container.appendChild(div);
}

document.body.appendChild(container);

function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}This should give each div a random background color.

1

Delete

3 more replies

How to create div using for loop in javascript

Related Questions

Comments (7)

How to create div using for loop in javascript