Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menggunakan senarai tidak tersusun dalam javascript

Bagaimana untuk menggunakan senarai tidak tersusun dalam javascript

PHPz
PHPzasal
2023-04-24 10:49:441008semak imbas

Mencipta senarai tidak tersusun menggunakan JavaScript ialah proses yang sangat mudah dan terdapat dua cara utama untuk mencapainya.

Kaedah pertama ialah menggunakan kaedah document.createElement() dan document.createTextNode(). Pendekatan ini mencipta elemen li baharu, menambah nod teks pada elemen li, dan kemudian menambah elemen li pada elemen ul. Berikut ialah kod untuk melaksanakan kaedah ini:

var ul = document.createElement('ul'); // 创建无序列表
document.body.appendChild(ul); // 添加到HTML文档中

var fruits = ['apple', 'banana', 'orange', 'kiwi'];  // 定义水果数组

for (var i = 0; i < fruits.length; i++) {
  var li = document.createElement(&#39;li&#39;); // 创建列表项
  var text = document.createTextNode(fruits[i]); // 创建文本节点
  li.appendChild(text); // 将文本添加到列表项中
  ul.appendChild(li); // 将列表项添加到无序列表中
}

Kaedah kedua ialah menggunakan atribut innerHTML. Pendekatan ini mencipta rentetan HTML dan kemudian memberikannya kepada atribut innerHTML elemen ul, yang akan menghuraikan rentetan secara automatik ke dalam elemen DOM. Berikut ialah kod untuk melaksanakan kaedah ini:

var fruits = [&#39;apple&#39;, &#39;banana&#39;, &#39;orange&#39;, &#39;kiwi&#39;];

var html = &#39;<ul>'; // 创建无序列表字符串

for (var i = 0; i < fruits.length; i++) {
  html += &#39;<li>' + fruits[i] + '</li>'; // 将列表项添加到无序列表字符串中
}

html += '</ul>'; // 关闭无序列表标签

document.body.innerHTML = html; // 将HTML字符串添加到HTML文档中

Di atas ialah dua cara untuk mencipta senarai tidak tertib menggunakan JavaScript. Kesemuanya sangat mudah dan hanya memerlukan beberapa pengetahuan JavaScript asas untuk dilaksanakan. Jadi, sama ada anda seorang pemula atau pembangun yang berpengalaman, kaedah ini boleh menguatkan projek anda dengan senarai yang tidak tersusun.

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn