js 实现ul

使用 JavaScript 动态创建 ul 列表

通过 JavaScript 动态创建 ul 列表并添加 li 元素，以下是几种常见方法：

方法 1：使用 document.createElement

// 创建 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 添加到页面中
document.body.appendChild(ul);

方法 2：使用 innerHTML

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

方法 3：使用 insertAdjacentHTML

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

方法 4：通过现有 DOM 元素操作

如果页面上已有 ul 元素，可以直接通过 JavaScript 添加 li：

const ul = document.getElementById('myList');
const items = ['Item 1', 'Item 2', 'Item 3'];
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  ul.appendChild(li);
});

方法 5：使用模板字符串

通过模板字符串生成完整的 HTML 结构并插入：

const items = ['Item 1', 'Item 2', 'Item 3'];
const html = `
  <ul>
    ${items.map(item => `<li>${item}</li>`).join('')}
  </ul>
`;
document.body.insertAdjacentHTML('beforeend', html);

注意事项

• 动态生成的 ul 可以通过 CSS 进一步样式化。
• 如果列表项需要事件监听，可以在创建 li 后绑定事件。
• 对于大量数据，建议使用文档片段（DocumentFragment）优化性能。