如何在javascript html中为父/子添加节点

Question

Hi in the below code i have a tree view structure for building.In the tree view contains one building and different floors. Now in that building i have 4 floors .suppose want to add another floor to the building .then how to do it.

then how to add child node to particular parent for the below code.once i click on add button then which i can able to add where it is under parent or child node

error:

morris.js:86 Uncaught Error: Graph container element not found
    at Area.Grid [as constructor] (morris.js:86)
    at Area.Line [as constructor] (morris.js:824)
    at new Area (morris.js:1451)
    at Object.Area (morris.js:1444)
    at dashboard-ecommerce.js:202
chartist.min.js:8 Uncaught TypeError: Cannot read property 'querySelectorAll' of null
    at Object.c.createSvg (chartist.min.js:8)
    at f.e [as createChart] (chartist.min.js:9)
    at f.h (chartist.min.js:8)
chartist.min.js:8 Uncaught TypeError: Cannot read property 'querySelectorAll' of null
    at Object.c.createSvg (chartist.min.js:8)
    at f.d [as createChart] (chartist.min.js:8)
    at f.h (chartist.min.js:8)
chartist.min.js:8 Uncaught TypeError: Cannot read property 'querySelectorAll' of null
    at Object.c.createSvg (chartist.min.js:8)
    at f.d [as createChart] (chartist.min.js:8)
    at f.h (chartist.min.js:8)
index.html:222 Uncaught ReferenceError: wijmo is not defined
    at onload (index.html:222)

​

 <div class="nav-left-sidebar sidebar-dark" style="margin-top:35px;"> <div class="menu-list" > <nav class="navbar navbar-expand-lg navbar-light"> <a class="d-xl-none d-lg-none" href="#" >Building</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav flex-column"> <li class="nav-divider"> </li> <li class="nav-item "> <a class="nav-link active" href="#" onclick="myFunction()" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1" aria-controls="submenu-1"><i class="fa fa-building" style="font-size:18px;color:gray"></i>Building</a> <div id="submenu-1" class="collapse submenu" style=""> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1-2" aria-controls="submenu-1-2" ><i class="fa fa-building" style="font-size:18px;color:gray"></i>Floors</a> <div id="submenu-1-2" class="collapse submenu" style=""> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1-2-1" aria-controls="submenu-1-2-1"><i class="fa fa-building" style="font-size:18px;color:gray"></i>Floor 1</a> <div id="submenu-1-2-1" class="collapse submenu" style=""> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="ecommerce-product-checkout.html"><i class="fa fa-user-circle-o" style="font-size:18px;color:gray"></i>Conference</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-user-circle-o" style="font-size:18px;color:gray"></i>Supervisors</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-user-circle-o"></i>Coordinators</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-user-circle-o"></i>Cubicles</a> </li> </ul> </div> <li class="nav-item"> <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1-2-2" aria-controls="submenu-1-2-2"><i class="fa fa-building" style="font-size:18px;color:gray"></i>Floor 2</a> <div id="submenu-1-2-2" class="collapse submenu" style=""> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-user-circle-o" aria-hidden="true"></i>Conference</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-user-circle-o"></i>Supervisors</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-user-circle-o"></i>Coordinators</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-user-circle-o"></i>Cubicles</a> </li> </ul> </div> <li class="nav-item"> <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1-2-3" aria-controls="submenu-1-2-2"><i class="fa fa-building" style="font-size:18px;color:gray"></i>Floor 3</a> <div id="submenu-1-2-3" class="collapse submenu" style=""> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-user-circle-o"></i>Conference</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-user-circle-o"></i>Supervisors</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-user-circle-o"></i>Coordinators</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-user-circle-o"></i>Cubicles</a> </li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1-2-4" aria-controls="submenu-1-2-4"><i class="fa fa-building" style="font-size:18px;color:gray"></i>Floor 4</a> <div id="submenu-1-2-4" class="collapse submenu" style=""> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-user-circle-o"></i>Conference</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-user-circle-o"></i>Supervisors</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-user-circle-o"></i>Coordinators</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-user-circle-o"></i>Cubicles</a> </li> </ul> </div> </li> </ul> </div> </li> </ul> </div> </li> </ul> </div> </nav> </div> </div> <div class="row"> <div class="col-xs-5"> <div id="theTree"> </div> </div> <div class="col-xs-7"> <p> Building: <input class="form-control" id="theInput" value="My New Node"> </p> <p> Floors: <button id="btnFirst" class="btn btn-default">First Child</button> <button id="btnLast" class="btn btn-default">Last Child</button> </p> <p> <button id="btnNoSel" class="btn btn-default">Remove Selection</button> </p> </div> </div>

Answer 1

You can use appendChild . Example:

var node = document.createElement("div");                // Create a <div> node
var textnode = document.createTextNode("Extra Floor");   // Create a text node
node.appendChild(textnode);                              // Append the text to <div>
document.getElementById("building").appendChild(node);     // Append <div> to the building with id="building"