Question

我想创建一个动态菜单树，通过单击任何节点可以在其中添加子节点（每当您单击节点时，应打开一个对话框以进入新的子节点）。无论用户在此文本框中输入什么内容，都应添加到树中。

的index.html：

<!DOCTYPE html>
<html>
   <head>
      <meta name="description" content="" />
      <meta name="author" content="" />
      <title>To do list</title>
      <!-- BOOTSTRAP CORE STYLE CSS -->
      <link href="assets/css/bootstrap.css" rel="stylesheet" />
      <style type="text/css">
         .btn{
         width: 80px;
         height: 80px;
         text-align: center;
         padding: 6px 0;
         font-size: 12px;
         border-radius: 55px;
         }
      </style>
   </head>
   <body>
      <div class="container" style="margin-top:40px;">
         <div style="text-align:center" >
            <input type="button"  value="Menu Root" class="btn btn-primary" onclick="foo(this)" id="root">
         </div>
      </div>
      <!-- BOOTSTRAP SCRIPTS  -->
      <script src="assets/plugins/bootstrap.js"></script>
      <script src="myscript.js"></script>
   </body>
</html>

JS：myscript.js

function foo(e)
{
    var node = prompt("Enter node name: ", "Node");
    if (node != null)
    {
        var curr_node = document.getElementById(e.id);  //get clicked button (parent)
        var div       = document.createElement("DIV");
        var btn       = document.createElement("INPUT");
        btn.setAttribute("type", "button");
        btn.setAttribute("id",Math.random().toString(36).substring(7)); //assign random id
        btn.setAttribute("value", node);
        btn.setAttribute("class","btn btn-primary");
        btn.setAttribute("onclick","foo(this)");
        div.appendChild(btn);   //add child btn to div
        curr_node.appendChild(div);   //add child div to parent btn
   }
}

我的浏览器和控制台都没有得到任何结果。问题是什么以及我该如何解决？

按钮单击动态创建新的子节点

0 个答案: