Javascript 下拉菜单中的动态列表

我想在点击链接时下拉菜单，我已经搜索并发现所有下拉菜单都是静态列表，但我想在点击链接时动态创建列表，类似于在点击链接时调用函数填充下拉菜单列表。 我发现：

<li class='has-sub'><a href='#'><span>Products</span></a>
  <ul>
     <li><a href='#'><span>Product 1</span></a></li>
     <li><a href='#'><span>Product 2</span></a></li>
     <li class='last'><a href='#'><span>Product 3</span></a></li>
  </ul>

但是我想用动态列表替换上面代码Product1、Product2、Product3中的内部列表

我正在列以下清单

document.getElementById("listPaths").innerHTML += "<ul style='list-style-type:circle;color: white' class='cl-effect-1'><br/><br/><br/><br/><br/><li>" + "<a href='#' style='text-decoration: none;' onclick=" + "'getRoutesList(" + countList + ");'>" + "Path " + countList + "</a>" + "</li></ul>";

---

我想创建一个函数，在单击链接时填充菜单列表。我无法使用innerHTML在列表路径中插入内部列表。

以下是工作示例：

---

那么你的问题是什么？你有什么问题？id为'listPaths'的元素在哪里？它是一个div。在这里：但是当我点击链接时，没有div出现。

<input type="button" onclick="updateList()" value="Update List"/>

<ul>
    <li id="listPaths">
        <ul>
     <li><a href='#'><span>Product 1</span></a></li>
     <li><a href='#'><span>Product 2</span></a></li>
     <li class='last'><a href='#'><span>Product 3</span></a></li>
  </ul>
    </li>
</ul>


var countList = 1;
function getRoutesList(countList) {
    alert('countList = ' + countList);
}

function updateList(){
document.getElementById("listPaths").innerHTML += "<ul style='list-style-type:circle;color: white' class='cl-effect-1'><br/><br/><br/><br/><br/><li>" + "<a href='#' style='text-decoration: none;' onclick=" + "'getRoutesList(" + countList + ");'>" + "Path " + countList + "</a>" + "</li></ul>";
}