hujung hadapan web
tutorial js
Bagaimana untuk membuat senarai HTML daripada tatasusunan JavaScript?
Bagaimana untuk membuat senarai HTML daripada tatasusunan JavaScript?
Dalam tutorial ini, kita akan melihat pelbagai cara untuk membuat senarai HTML daripada tatasusunan JavaScript. Jika kita bercakap tentang senarai HTML mudah, maka kita membuat semua senarai secara manual menggunakan ul (senarai tidak tersusun) dan dalam teg li em> (senarai).
Pertimbangkan situasi di mana anda akan mempunyai n item dan perlu mencetaknya dalam senarai, kemudian menulis semua item akan menjadi tugas yang sangat sibuk. projek dan cetak secara manual kan? Ini kemudiannya boleh dilakukan dengan mudah menggunakan kaedah lelaran JavaScript.
Mari kita lihat pelbagai cara untuk membuat senarai HTML dalam JavaScript. gelung lelaran menggunakan tatasusunan mudah untuk gelung Semua item yang terdapat dalam senarai Ini ialah kaedah lalai JavaScript biasa untuk lelaran dan kemudian menambahkan item senarai pada item
ul- (senarai tidak tersusun) dengan mencipta li (senarai) menggunakan kaedah
- createElemnt
menggunakan appendChild.
Contoh - Menggunakan gelung for dengan serpihan
Ini adalah sama seperti kaedah pertama yang dibincangkan di atas, tetapi perbezaannya ialah kita akan menggunakan Fragment
untuk memasukkan. Fragmen cenderung untuk memisahkannya, bermakna ia tidak dilampirkan pada pokok DOM, jadi ia tidak dilampirkan pada DOM sebenar, maka penyemak imbas perlu melakukan lebih sedikit kerja. Dalam kaedah di atas, tanpa serpihan, penyemak imbas melakukan banyak kerja di belakang skrin, yang menjejaskan prestasi sebenar, dan ia sebenarnya tidak dipaparkan dalam halaman sebenar. Oleh itu, lebih baik menggunakan serpihan. - Untuk menggunakan serpihan, kami mula-mula akan menambahkan item senarai pada serpihan dan kemudian menambahkan serpihan pada senarai, dan bukannya memasukkan terus ke dalam item senarai tanpa serpihan. p> Contoh
<html>
<body>
<h3> HTML list using JavaScript using for loop</h3>
<ul id="UnList"></ul>
<script>
let data = ["item1", "item2", "item3", "item4"];
let list = document.getElementById("UnList");
for (i = 0; i < data.length; ++i) {
var li = document.createElement('li');
li.innerText = data[i];
list.appendChild(li);
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<body>
<h3>HTML list using JavaScript with fragment</h3>
<ul id="UnList"></ul>
<script>
let data = ["item1", "item2", "item3", "item4"];
let list = document.getElementById("UnList");
var fragList = document.createDocumentFragment();
for (i = 0; i < data.length; ++i) {
var li = document.createElement('li');
li.textContent = data[i];
fragList.appendChild(li);
}
list.appendChild(fragList);
</script>
</body>
</html>Menggunakan kaedah forEach()
forEach() ialah kaedah tatasusunan dalam JavaScript yang memanggil fungsi tertentu sekali untuk setiap elemen item, pada asasnya ia melaksanakan fungsi panggilan balik Fungsi tersuai untuk setiap item yang terdapat dalam senarai tatasusunan, yang berfungsi sama seperti gelung for. Contoh Atas ialah kandungan terperinci Bagaimana untuk membuat senarai HTML daripada tatasusunan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!<!DOCTYPE html>
<html>
<body>
<h3>HTML list using JavaScript forEach()</h3>
<ul id="UnList"></ul>
<script>
let data = ["item1", "item2", "item3", "item4"];
let list = document.getElementById("UnList");
var fragList = document.createDocumentFragment();
data.forEach(function (item) {
var li = document.createElement('li');
li.textContent = item;
fragList.appendChild(li);
});
list.appendChild(fragList);
</script>
</body>
</html>
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri?
Mar 18, 2025 pm 03:12 PM
Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.
Bagaimanakah saya mengoptimumkan kod JavaScript untuk prestasi dalam penyemak imbas?
Mar 18, 2025 pm 03:14 PM
Artikel ini membincangkan strategi untuk mengoptimumkan prestasi JavaScript dalam pelayar, memberi tumpuan kepada mengurangkan masa pelaksanaan dan meminimumkan kesan pada kelajuan beban halaman.
Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan?
Apr 04, 2025 pm 02:42 PM
Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...
Bagaimanakah saya boleh debug kod javascript dengan berkesan menggunakan alat pemaju pelayar?
Mar 18, 2025 pm 03:16 PM
Artikel ini membincangkan debugging JavaScript yang berkesan menggunakan alat pemaju pelayar, memberi tumpuan kepada menetapkan titik putus, menggunakan konsol, dan menganalisis prestasi.
Bagaimanakah saya menggunakan peta sumber untuk debug kod JavaScript minified?
Mar 18, 2025 pm 03:17 PM
Artikel ini menerangkan cara menggunakan peta sumber untuk debug JavaScript minifikasi dengan memetakannya kembali ke kod asal. Ia membincangkan membolehkan peta sumber, menetapkan titik putus, dan menggunakan alat seperti Chrome Devtools dan Webpack.
Bagaimana saya menggunakan kerangka koleksi Java dengan berkesan?
Mar 13, 2025 pm 12:28 PM
Artikel ini meneroka penggunaan rangka koleksi Java yang berkesan. Ia menekankan memilih koleksi yang sesuai (senarai, set, peta, giliran) berdasarkan struktur data, keperluan prestasi, dan keselamatan benang. Mengoptimumkan penggunaan pengumpulan melalui cekap
TypeScript untuk pemula, Bahagian 2: Jenis Data Asas
Mar 19, 2025 am 09:10 AM
Sebaik sahaja anda telah menguasai tutorial TypeScript peringkat kemasukan, anda harus dapat menulis kod anda sendiri dalam IDE yang menyokong TypeScript dan menyusunnya ke dalam JavaScript. Tutorial ini akan menyelam ke dalam pelbagai jenis data dalam TypeScript. JavaScript mempunyai tujuh jenis data: null, undefined, boolean, nombor, rentetan, simbol (diperkenalkan oleh ES6) dan objek. Typescript mentakrifkan lebih banyak jenis atas dasar ini, dan tutorial ini akan meliputi semuanya secara terperinci. Jenis data null Seperti JavaScript, Null dalam TypeScript
Bermula dengan Chart.js: Pie, Donut, dan Carta Bubble
Mar 15, 2025 am 09:19 AM
Tutorial ini akan menerangkan cara membuat carta pai, cincin, dan gelembung menggunakan carta.js. Sebelum ini, kami telah mempelajari empat jenis carta carta.js: carta baris dan carta bar (tutorial 2), serta carta radar dan carta rantau polar (Tutorial 3). Buat carta pai dan cincin Carta pai dan carta cincin sangat sesuai untuk menunjukkan perkadaran keseluruhan yang dibahagikan kepada bahagian yang berlainan. Sebagai contoh, carta pai boleh digunakan untuk menunjukkan peratusan singa lelaki, singa wanita dan singa muda dalam safari, atau peratusan undi yang diterima oleh calon yang berbeza dalam pilihan raya. Carta pai hanya sesuai untuk membandingkan parameter tunggal atau dataset. Harus diingat bahawa carta pai tidak dapat menarik entiti dengan nilai sifar kerana sudut kipas dalam carta pai bergantung pada saiz berangka titik data. Ini bermaksud mana -mana entiti dengan perkadaran sifar
