如何使用javascript从数据库生成动态导航菜单

// 假设已经连接到数据库，并获取到导航菜单数据
const menuData = [
  { id: 1, name: '首页', url: '/home' },
  { id: 2, name: '产品', url: '/products' },
  { id: 3, name: '关于我们', url: '/about' },
  // 其他菜单项...
];

// 生成导航菜单
function generateMenu() {
  const menuContainer = document.getElementById('menu-container');

  // 清空菜单容器
  menuContainer.innerHTML = '';

  // 遍历菜单数据，生成菜单项
  menuData.forEach(item => {
    const menuItem = document.createElement('a');
    menuItem.href = item.url;
    menuItem.textContent = item.name;

    menuContainer.appendChild(menuItem);
  });
}

// 页面加载完成后生成导航菜单
window.addEventListener('load', generateMenu);