In this article, we will learn how to create multiple div elements dynamically in JavaScript.

Sometimes, you may need to generate and display several <div> elements on a web page based on user input or other dynamic factors.

Method 1: Using the createElement() Method #

You can use the createElement() method to dynamically create multiple <div> elements.

Here's the code snippet that demonstrates how to create and append multiple divs dynamically:

Explanation:

  1. We define a function createDivs that takes the number of divs to create as a parameter.
  2. Inside the loop, we create new div elements and customize their content before appending them to the container.

Method 2: Using InnerHTML Property #

Alternatively, you can utilize the innerHTML property to add multiple divs to an existing container element.

Explanation:

  1. We access the container element by its ID.
  2. Using a loop, we append new div elements with desired content to the container using the innerHTML property.

Conclusion #

In this article, we've explored two effective methods for creating multiple div elements dynamically in JavaScript.