Bagaimana untuk menambah elemen secara mendatar dalam halaman HTML menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk menambah elemen secara mendatar dalam halaman HTML menggunakan JavaScript?

WBOY

Lepaskan： 2023-08-25 10:01:17

ke hadapan

846 orang telah melayarinya

Bagaimana untuk menambah elemen secara mendatar dalam halaman HTML menggunakan JavaScript?

Kami boleh menggunakan kaedah "createElement" JavaScript untuk mencipta elemen baharu. Kami kemudiannya boleh menambah elemen itu pada elemen induk pada halaman HTML menggunakan kaedah "appendChild". Untuk meletakkan elemen secara mendatar, kita boleh menggunakan gaya CSS pada elemen yang baru dibuat, seperti "display:inline-block" atau "float:left/right".

Katakan kita ingin menerangkan perwakilan grafik struktur data senarai terpaut. Setiap kali pengguna mengklik butang, nod baharu (dalam kes kami diwakili oleh bulatan hijau) harus ditambah secara mendatar ke hadapan senarai nod.

Dan teks di dalam bulatan hijau itu hendaklah indeks nod tertentu itu.

Kaedah

Kaedah di sini sangat mudah dan mudah−

Kami akan mencipta butang yang akan bertanggungjawab untuk memasukkan nod baharu.
Setiap kali butang diklik, kiraan nod meningkat sebanyak 1.
Fungsi berasingan yang bertanggungjawab untuk memaparkan nod kemudiannya akan menerima kiraan itu dan menjadikan nod itu.
Untuk menjadikan nod dalam tertib terbalik, kami menetapkan sifat arah flex bagi div bekas kepada baris-terbalik.

Contoh

Berikut ialah contoh lengkap pendekatan ini -

<!DOCTYPE html>
<html>
<head>
    <title>Linked List Graphic Representation</title>
      <style>
      #holder {
         display: flex;
         flex-direction: row-reverse;
         align-items: center;
         margin-top: 10px;
         justify-content: flex-end;
         overflow-x: scroll;
      }
      .element{
         border-radius: 50%;
         background: green;
         color: white;
         height: 25px;
         width: 25px;
         display: flex;
         align-items: center;
         justify-content: center;
      }
     </style>
   </head>
   <body>
      <button onclick = "handleInsert()">Insert Node</button>
      <div id = 'holder'></div>
      <script>
         let currentElements = 0; 
         const handleRender = () => {
            const holder = document.getElementById('holder');
            holder.innerHTML = '';
            for (const index in Array(currentElements).fill(null)) {
               const element = document.createElement('div');
               element.innerText = index;
               element.classList.add('element');
               holder.appendChild(element)
            }
         }; 
         const handleInsert = () => {
            currentElements++;
            handleRender();
         };
         handleRender();  
     </script>
   </body>
</html>

Salin selepas log masuk

Terjemahan bahasa Cina bagi

Penjelasan

ialah:

Penjelasan

Kami mencipta fail HTML asas menggunakan JavaScript untuk mencipta perwakilan grafik ringkas senarai terpaut. Ia mempunyai butang yang, apabila diklik, memanggil fungsi yang memasukkan nod (elemen) baharu ke dalam senarai terpaut dan mengemas kini perwakilan grafik.

Perwakilan grafik dicipta menggunakan elemen div dengan nama kelas "elemen" dan digayakan ke dalam bulatan. Unsur-unsur dipaparkan dalam bekas fleksibel dengan "id" "pemegang", yang ditetapkan kepada overflow-x: tatal supaya ia boleh ditatal apabila terdapat terlalu banyak elemen dalam port pandangan.

Atas ialah kandungan terperinci Bagaimana untuk menambah elemen secara mendatar dalam halaman HTML menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!