当前位置：首页 > JavaScript

js 实现ul

2026-03-14 18:53:28JavaScript

使用 JavaScript 动态创建 `ul` 列表

在 JavaScript 中，可以通过 DOM 操作动态创建 ul 列表并填充内容。以下是几种常见方法：

方法 1：直接操作 `innerHTML`

通过字符串拼接快速生成列表结构：

js 实现ul

const listItems = ['Item 1', 'Item 2', 'Item 3'];
const ul = document.createElement('ul');
ul.innerHTML = listItems.map(item => `<li>${item}</li>`).join('');
document.body.appendChild(ul);

方法 2：使用 `appendChild`

逐个创建 li 元素并添加到 ul：

const data = ['Apple', 'Banana', 'Orange'];
const ul = document.createElement('ul');

data.forEach(text => {
  const li = document.createElement('li');
  li.textContent = text;
  ul.appendChild(li);
});

document.getElementById('container').appendChild(ul);

方法 3：使用 DocumentFragment

批量操作 DOM 时性能更优：

js 实现ul

const items = ['Red', 'Green', 'Blue'];
const fragment = document.createDocumentFragment();
const ul = document.createElement('ul');

items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  fragment.appendChild(li);
});

ul.appendChild(fragment);
document.body.appendChild(ul);

方法 4：配合事件委托

为动态列表添加事件监听：

const ul = document.createElement('ul');
['Home', 'About', 'Contact'].forEach(text => {
  const li = document.createElement('li');
  li.textContent = text;
  ul.appendChild(li);
});

ul.addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    console.log('Clicked:', e.target.textContent);
  }
});

document.body.appendChild(ul);

方法 5：使用模板字符串

复杂列表结构的生成方式：

const products = [
  { name: 'Laptop', price: 999 },
  { name: 'Phone', price: 699 }
];

const ul = document.createElement('ul');
ul.innerHTML = products.map(p => `
  <li class="product">
    <span>${p.name}</span>
    <span>$${p.price}</span>
  </li>
`).join('');

document.body.appendChild(ul);