Tambah, padam dan alihkan senarai javascript

JavaScript ialah bahasa pengaturcaraan yang digunakan secara meluas dalam pembangunan web. Senarai adalah elemen yang sangat biasa dalam reka bentuk web. Melalui JavaScript, kami boleh menambah, memadam dan memindahkan elemen senarai dengan mudah untuk meningkatkan pengalaman pengguna halaman web. Seterusnya, kita akan membincangkan kaedah menambah, memadam dan memindahkan senarai.

1. Penambahan senarai:

Apabila kita perlu menambah elemen senarai, kita boleh melakukannya melalui kod berikut:

// 找到要添加新列表项的父元素
var list = document.getElementById("list");
// 创建新的列表项
var newItem = document.createElement("li");
// 给新的列表项添加内容
var text = document.createTextNode("新的列表项");
newItem.appendChild(text);
// 将新的列表项添加到列表中
list.appendChild(newItem);

Dalam kod di atas, kita mula-mula menggunakan document.getElementById() Kaedah mendapat elemen induk yang mana item senarai baharu akan ditambahkan. Seterusnya, cipta item senarai baharu melalui kaedah document.createElement(), tambah kandungan pada item senarai dan akhir sekali tambah item senarai baharu pada senarai melalui kaedah appendChild().

2. Pemadaman senarai:

Apabila kita perlu memadam elemen senarai, kita boleh melakukannya melalui kod berikut:

// 找到要删除的列表项
var item = document.getElementById("deleteItem");
// 找到列表项的父元素
var list = item.parentNode;
// 删除列表项
list.removeChild(item);

Dalam kod di atas, kita mula-mula lulus document.getElementById() Kaedah untuk mendapatkan item senarai yang akan dipadamkan. Seterusnya, dapatkan elemen induk item senarai melalui atribut parentNode. Akhirnya, item senarai dialih keluar daripada senarai melalui kaedah removeChild().

3. Senarai bergerak:

Apabila kita perlu memindahkan elemen senarai, kita boleh menggunakan dua kaedah berikut:

1. insertBefore() Kaedah:

Kaedah ini memasukkan elemen sebelum elemen yang ditentukan. Elemen senarai bergerak boleh dicapai melalui kod berikut:

// 找到要移动的列表项
var item = document.getElementById("moveItem");
// 找到要插入到的位置
var location = document.getElementById("beforeLocation");
// 找到列表项的父元素
var list = item.parentNode;
// 移动列表项到指定位置之前
list.insertBefore(item, location);

Dalam kod di atas, kita mula-mula mendapatkan item senarai untuk dialihkan dan kedudukan untuk dimasukkan melalui kaedah document.getElementById(). Seterusnya, dapatkan elemen induk item senarai melalui atribut parentNode. Akhir sekali, item senarai dimasukkan sebelum kedudukan yang ditentukan melalui kaedah insertBefore().

2. appendChild() Kaedah:

Kaedah ini memasukkan elemen baharu pada penghujung senarai elemen anak bagi elemen yang ditentukan. Elemen senarai bergerak boleh dicapai melalui kod berikut:

// 找到要移动的列表项
var item = document.getElementById("moveItem");
// 找到要移动到的位置
var location = document.getElementById("afterLocation");
// 找到列表项的父元素
var list = item.parentNode;
// 从列表中删除该列表项
list.removeChild(item);
// 将该列表项添加到新的位置
location.appendChild(item);

Dalam kod di atas, kami mula-mula mendapatkan item senarai untuk dialihkan dan kedudukan untuk dialihkan melalui kaedah document.getElementById(). Seterusnya, dapatkan elemen induk item senarai melalui atribut parentNode. Kemudian, gunakan kaedah removeChild() untuk memadam item senarai daripada senarai asal. Akhir sekali, gunakan kaedah appendChild() untuk menambah item senarai ke lokasi baharunya.

Ringkasan:

JavaScript menyediakan pelbagai kaedah untuk menambah, memadam dan memindahkan elemen senarai. Pembangun boleh memilih kaedah yang sesuai berdasarkan keperluan khusus untuk meningkatkan pengalaman pengguna halaman web.

Atas ialah kandungan terperinci Tambah, padam dan alihkan senarai javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!