Dynamically creating new child node on button click

Question

I want to create a dynamic menu tree in which a child node can be added by clicking any node (whenever you click a node a dialogue box should open to enter a new child node). Whatever the user enters in the this text box, should get added to the tree.

image of what I want to implement

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

I am not getting ny results on my browser nor in console. What's the problem and how should I resolve it?

http://stackoverflow.com/a/8650996/3840093 check this link, may be help you — Kirankumar Dafda, Apr 25 '16 at 13:11
Are you trying to have a button inside the root button? Or a button next to the root button? — 4castle, Apr 25 '16 at 13:21
Possible duplicate of [Create input as child of input](http://stackoverflow.com/questions/13629410/create-input-as-child-of-input) — 4castle, Apr 25 '16 at 13:23
I want to add a button as a leaf below its parent button. Please refer to the image mentioned. — Marco Roberts, Apr 25 '16 at 13:24

Dynamically creating new child node on button click

0 Answers0