How to write div loop using Javascript

In Web development, using JavaScript to dynamically generate HTML elements is a common technology, and one of the common requirements is the need to generate multiple HTML tags of the same type in a loop. This article will introduce how to use JavaScript to implement div loops.

Steps:

1. Create a div container

Using JavaScript to dynamically generate HTML elements requires first finding the parent container of the element. Here we create an id For the div container of the container, the code is as follows:

<div id="container">

</div>

2. Create a JavaScript function

We create a function named createDiv to generate a specified number of div tags in a loop . Next, inside the function, define a variable i for loop counting.

function createDiv(num) {
    for (let i = 0; i < num; i++) {
        //TODO
    }
}

3. Create div tags and set id and class attributes for each element

Inside the loop, you can use JavaScript's createElement() method to create a new div element , and then use the setAttribute() method to set the id and class attributes for each element.

function createDiv(num) {
    for (let i = 0; i < num; i++) {
        let div = document.createElement("div");
        div.setAttribute("id", "myDiv" + i);
        div.setAttribute("class", "myDivClass");
        //TODO
    }
}

4. Set text and style for each element

With the created div elements, we can set their text content, styles and events. Here we use the textContent property to set the text content for each element.

function createDiv(num) {
    for (let i = 0; i < num; i++) {
        let div = document.createElement("div");
        div.setAttribute("id", "myDiv" + i);
        div.setAttribute("class", "myDivClass");
        div.textContent = "我是第" + (i+1) + "个div元素";
        div.style.cssText = 'width: 50px; height: 50px; background-color: #ccc;';
        //TODO
    }
}

5. Add new div elements to the parent container

With the created div elements, we also need to add them to the parent container to display in in the web page. New div elements can be added to the parent container using the appendChild() method.

function createDiv(num) {
    let container = document.getElementById("container");
    for (let i = 0; i < num; i++) {
        let div = document.createElement("div");
        div.setAttribute("id", "myDiv" + i);
        div.setAttribute("class", "myDivClass");
        div.textContent = "我是第" + (i+1) + "个div元素";
        div.style.cssText = 'width: 50px; height: 50px; background-color: #ccc;';
        container.appendChild(div);
    }
}

6. Call the function to generate a specified number of div elements

Now our createDiv function can loop to generate a specified number of div elements and add them to the parent container , we can generate div elements by calling the function.

createDiv(10);

The complete code is as follows:

    
        


<div id="container">

</div>    

Conclusion:

This article introduces the method of using JavaScript to implement div loop. By dynamically generating HTML elements, it can help developers more Build web pages easily. Once you learn this technology, you can flexibly apply it in your projects and improve development efficiency.

The above is the detailed content of How to write div loop using Javascript. For more information, please follow other related articles on the PHP Chinese website!