如何动态添加图像或图标子菜单

<ul id="menu">
  <li><a href="#">菜单项1</a></li>
  <li><a href="#">菜单项2</a></li>
  <li><a href="#">菜单项3</a></li>
</ul>

#menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#menu li {
  display: inline-block;
  margin-right: 10px;
}

#menu li a {
  text-decoration: none;
  padding: 5px 10px;
  background-color: #ccc;
  color: #000;
}

#menu li a:hover {
  background-color: #999;
  color: #fff;
}

// 获取菜单容器
var menu = document.getElementById("menu");

// 创建新的菜单项
var newMenuItem = document.createElement("li");
var newMenuLink = document.createElement("a");

// 设置菜单项的文本和链接
newMenuLink.innerHTML = "新菜单项";
newMenuLink.href = "#";

// 将菜单项添加到菜单容器中
newMenuItem.appendChild(newMenuLink);
menu.appendChild(newMenuItem);

// 创建新的菜单项
var newMenuItem = document.createElement("li");
var newMenuLink = document.createElement("a");
var newMenuIcon = document.createElement("img");

// 设置菜单项的文本和链接
newMenuLink.innerHTML = "新菜单项";
newMenuLink.href = "#";

// 设置菜单项的图标
newMenuIcon.src = "icon.png";

// 将图标添加到菜单项中
newMenuLink.appendChild(newMenuIcon);

// 将菜单项添加到菜单容器中
newMenuItem.appendChild(newMenuLink);
menu.appendChild(newMenuItem);