Bagaimana untuk melaksanakan senarai dalam javascript

JavaScript ialah bahasa skrip yang digunakan secara meluas yang boleh digunakan untuk berinteraksi dengan halaman web dan melaksanakan pelbagai fungsi dalam halaman web. Antaranya, senarai pelaksanaan adalah salah satu aplikasi biasa JavaScript. Artikel ini akan meneroka cara menggunakan JavaScript untuk melaksanakan senarai dan memperkenalkan beberapa jenis senarai biasa serta kaedah pelaksanaan yang sepadan.

Jenis senarai

Dalam aplikasi praktikal, jenis senarai biasa kami termasuk senarai tertib (senarai tersusun, dirujuk sebagai ol), senarai tidak tertib (senarai tidak tersusun, dirujuk sebagai ul) dan senarai definisi (senarai definisi, dirujuk sebagai dl) tiga jenis.

Pelaksanaan senarai

1. Pelaksanaan senarai tertib

Kami boleh membuat senarai tertib melalui JavaScript dan menambah beberapa item senarai padanya. Kodnya adalah seperti berikut:

//创建有序列表
var ol = document.createElement('ol');
//创建列表项
var li1 = document.createElement('li');
li1.innerHTML = '列表项1';
var li2 = document.createElement('li');
li2.innerHTML = '列表项2';
var li3 = document.createElement('li');
li3.innerHTML = '列表项3';
//将列表项添加到有序列表中
ol.appendChild(li1);
ol.appendChild(li2);
ol.appendChild(li3);
//将有序列表添加到网页中
document.body.appendChild(ol);

Dalam kod di atas, objek senarai tertib baharu dibuat pertama kali menggunakan kaedah createElement() dan tiga item senarai ditambahkan padanya menggunakan kaedah appendChild(). Akhir sekali, tambah senarai tertib ini pada halaman web menggunakan kaedah appendChild(). Selepas melaksanakan kod, kita boleh melihat senarai tiga item senarai tersusun muncul di halaman web.

2. Pelaksanaan senarai tak tertib

Pelaksanaan senarai tak tertib adalah serupa dengan pelaksanaan senarai tersusun, cuma gunakan <ul> bukannya <ol>, seperti yang ditunjukkan di bawah:

//创建无序列表
var ul = document.createElement('ul');
//创建列表项
var li1 = document.createElement('li');
li1.innerHTML = '列表项1';
var li2 = document.createElement('li');
li2.innerHTML = '列表项2';
var li3 = document.createElement('li');
li3.innerHTML = '列表项3';
//将列表项添加到无序列表中
ul.appendChild(li1);
ul.appendChild(li2);
ul.appendChild(li3);
//将无序列表添加到网页中
document.body.appendChild(ul);

Dalam kod di atas, kami mencipta objek senarai tidak tertib baharu, menambah tiga item senarai padanya dan kemudian menambahkannya pada halaman web. Selepas melaksanakan kod, kita boleh melihat senarai tiga item senarai tidak tersusun muncul di halaman web.

3. Pelaksanaan senarai definisi

Pelaksanaan senarai definisi adalah berbeza daripada senarai tersusun dan senarai tidak tersusun. Dalam senarai definisi, setiap item senarai mengandungi istilah dan perihalan. Untuk melakukan ini, kita perlu membuat teg <dt> dan <dd> untuk mewakili istilah dan perihalan masing-masing. Kod tersebut dilaksanakan seperti berikut:

//创建定义列表
var dl = document.createElement('dl');
//创建术语和描述
var dt1 = document.createElement('dt');
dt1.innerHTML = '术语1';
var dd1 = document.createElement('dd');
dd1.innerHTML = '描述1';
var dt2 = document.createElement('dt');
dt2.innerHTML = '术语2';
var dd2 = document.createElement('dd');
dd2.innerHTML = '描述2';
var dt3 = document.createElement('dt');
dt3.innerHTML = '术语3';
var dd3 = document.createElement('dd');
dd3.innerHTML = '描述3';
//将术语和描述添加到定义列表中
dl.appendChild(dt1);
dl.appendChild(dd1);
dl.appendChild(dt2);
dl.appendChild(dd2);
dl.appendChild(dt3);
dl.appendChild(dd3);
//将定义列表添加到网页中
document.body.appendChild(dl);

Dalam kod di atas, kami mencipta objek senarai definisi baharu dan menambah tiga istilah serta perihalan yang sepadan dengannya. Akhir sekali, tambahkannya ke halaman web. Selepas melaksanakan kod, kita boleh melihat senarai definisi yang mengandungi tiga istilah dan penerangan muncul di halaman web.

Kesimpulan

JavaScript ialah bahasa skrip yang berkuasa dan fleksibel yang boleh melaksanakan banyak fungsi halaman web melalui kod. Melalui pengenalan artikel ini, kita dapat melihat bahawa dengan menggunakan JavaScript, kita boleh membuat dan mengurus pelbagai jenis senarai dengan mudah, dengan itu menambahkan lebih banyak interaktiviti dan kefungsian pada halaman web.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan senarai dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!