DEV Community

_Khojiakbar_
_Khojiakbar_

Posted on

1

Dynamic Element Creation

// Selects the container element using jQuery
const container = $('.container');

// Function to create a specified number of div elements
function createElement(num) {
    // Loop to create `num` number of div elements
    for (let i = 0; i < num; i++) {
        // Create a new div element
        const div = document.createElement('div');

        // Add classes to the div element for styling
        div.classList.add('p-5', 'bg-warning', 'm-3');

        // Set the inner HTML of the div element
        div.innerHTML = `<p>${i + 1}. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, aliquam!</p>`;

        // Append the div element to the container
        container.append(div);

        // Log the created div element to the console
        console.log(div);
    }
}

// Uncomment the following line to create 40 div elements
// createElement(40);

Enter fullscreen mode Exit fullscreen mode

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay