3schools

Web Tools Table Maker3schools TranslateImage CompressorFavicon Icon GeneratorCrop & Resize Image
Apu
Apu January 19, 2024 › #Array › #forEach
❌

How to create div using for loop in javascript

Hey, I'm trying to create multiple div elements using a for loop in JavaScript. Here's the code snippet I have so far:

<script>
 for (let i = 0; i < 5; i++) {
  const div = document.createElement('div');
  div.textContent = `This is div ${i + 1}`;
  document.body.appendChild(div);
 }
</script>

The problem is that while this code does create div elements, they all stack on top of each other. I want them to appear side by side. Can anyone help me with this?

save
listen
AI Answer
7 Answers
Write Your Answer
  1. 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.
    • That's a great solution, But what if I want to add some spacing between the divs?
    • 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=
    • That works, But now, I want to center these divs on the page horizontally. How can I do that?
    • 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.
    • This is really helpful, But now, I'm wondering how I can change the background color of each div dynamically.
    • 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.
    Reply Delete
    Share
    Reply Delete
    Share
loading
back
View All