下拉菜单中的动态列表

Question

我想在链接单击上下拉菜单，我搜索并发现所有下拉菜单都是静态列表，但是我想在链接单击上动态创建列表，就像一个函数，该函数在填充时单击以填充下拉列表点击链接。 我发现的是：

<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在我的listPaths中插入内部列表。

Answer 1

这是工作示例：

http://jsfiddle.net/q1hrf314/

<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>";
}