Bagaimana untuk menulis gelung div menggunakan Javascript

Dalam pembangunan web, menggunakan JavaScript untuk menjana unsur HTML secara dinamik ialah teknologi biasa dan salah satu keperluan biasa ialah menjana berbilang teg HTML daripada jenis yang sama dalam gelung. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan gelung div.

Langkah:

1. Cipta bekas div

Menggunakan JavaScript untuk menjana elemen HTML secara dinamik memerlukan mencari bekas induk bagi elemen tersebut id Untuk bekas div bekas, kodnya adalah seperti berikut:

<div id="container">

</div>

2. Cipta fungsi JavaScript

Kami mencipta fungsi bernama createDiv untuk menjana nombor yang ditentukan daripada tag div dalam gelung . Seterusnya, di dalam fungsi, tentukan pembolehubah i untuk pengiraan gelung.

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

3. Buat teg div dan tetapkan id dan atribut kelas untuk setiap elemen

Di dalam gelung, anda boleh menggunakan kaedah createElement() JavaScript untuk mencipta div baharu element , dan kemudian gunakan kaedah setAttribute() untuk menetapkan id dan atribut kelas bagi setiap elemen.

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. Tetapkan teks dan gaya untuk setiap elemen

Dengan elemen div yang dicipta, kita boleh menetapkan kandungan teks, gaya dan acaranya. Di sini kami menggunakan sifat textContent untuk menetapkan kandungan teks untuk setiap elemen.

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. Tambahkan elemen div baharu pada bekas induk

Dengan elemen div yang dicipta, kita juga perlu menambahkannya pada bekas induk untuk dipaparkan dalam halaman web . Elemen div baharu boleh ditambahkan pada bekas induk menggunakan kaedah appendChild().

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. Panggil fungsi untuk menjana bilangan elemen div yang ditentukan

Kini fungsi createDiv kami boleh gelung untuk menjana nombor tertentu elemen div dan menambahnya pada induk container , kita boleh menjana elemen div dengan memanggil fungsi.

createDiv(10);

Kod lengkap adalah seperti berikut:

    
        


<div id="container">

</div>    

Kesimpulan:

Artikel ini memperkenalkan kaedah menggunakan JavaScript untuk melaksanakan gelung div Dengan menjana elemen HTML secara dinamik, ia boleh membantu pembangun lebih banyak Membina halaman web dengan mudah. Sebaik sahaja anda mempelajari teknologi ini, anda boleh menggunakannya secara fleksibel dalam projek anda dan meningkatkan kecekapan pembangunan.

Atas ialah kandungan terperinci Bagaimana untuk menulis gelung div menggunakan Javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!