当前位置：首页 > JavaScript

js 实现ul

2026-04-06 12:41:07JavaScript

在JavaScript中实现<ul>列表可以通过多种方式完成，以下是一些常见的方法：

动态创建UL元素并添加LI子项

使用document.createElement创建<ul>和<li>元素，并通过appendChild或innerHTML添加内容：

// 创建ul元素
const ul = document.createElement('ul');

// 添加li元素
const items = ['Item 1', 'Item 2', 'Item 3'];
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  ul.appendChild(li);
});

// 将ul添加到DOM中
document.body.appendChild(ul);

使用innerHTML直接生成

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

const items = ['Apple', 'Banana', 'Orange'];
const ul = document.createElement('ul');
ul.innerHTML = items.map(item => `<li>${item}</li>`).join('');
document.body.appendChild(ul);

结合模板字符串

利用模板字符串动态生成列表内容：

const data = [
  { id: 1, name: 'Red' },
  { id: 2, name: 'Blue' }
];

const ul = document.createElement('ul');
ul.innerHTML = `
  ${data.map(item => `<li data-id="${item.id}">${item.name}</li>`).join('')}
`;
document.querySelector('#container').appendChild(ul);

使用DocumentFragment优化性能

当需要添加大量列表项时，使用DocumentFragment减少DOM操作次数：

const fragment = document.createDocumentFragment();
const ul = document.createElement('ul');

for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i + 1}`;
  fragment.appendChild(li);
}

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

响应式列表实现

结合事件委托实现动态交互：

const ul = document.createElement('ul');
ul.id = 'dynamicList';

['First', 'Second', 'Third'].forEach(text => {
  const li = document.createElement('li');
  li.className = 'list-item';
  li.textContent = text;
  ul.appendChild(li);
});

document.body.appendChild(ul);

// 事件委托处理点击
ul.addEventListener('click', (e) => {
  if (e.target.classList.contains('list-item')) {
    console.log('Clicked:', e.target.textContent);
  }
});

使用现代框架示例（React）

在React中实现动态列表的组件化方式：

js 实现ul

function ListComponent({ items }) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

// 使用示例
const items = ['React', 'Vue', 'Angular'];
ReactDOM.render(
  <ListComponent items={items} />,
  document.getElementById('root')
);

以上方法涵盖了从原生JavaScript到现代框架的实现方式，可根据具体需求选择合适的方法。动态生成的列表通常需要配合CSS进行样式控制，建议为<ul>和<li>添加适当的类名以便样式管理。