Javascipt List-within-List (hierarchical list)

Edit 0 3 …
index.html
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <input type="text" id="text_input"></input>
  <button onclick="doStuff()">add</button>
  <ul id="top">top:</ul>
</body>
</html>
If you are making a website, like on neocities.org, then you need to change the html to look like this:

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <script src="something.js" type="text/javascript"></script>
  <link href="whatever.css" type="text/css" rel="stylesheet"></link>
</head>
<body>
  <input type="text" id="text_input"></input>
  <button onclick="doStuff()">add</button>
  <ul id="top">top:</ul>
</body>
</html>




something.js
function doStuff() {
  var textBox = document.getElementById("text_input");
  var newItem = document.createElement("li");
  newItem.textContent = textBox.value;
  newItem.oncontextmenu = doNothing;
  var ullist = document.getElementById("top");
  ullist.appendChild(newItem);
}
 
function doNothing() {
  return false;
}
 
document.addEventListener("contextmenu", function(event) {
  // store the thing we right clicked on
  var target = event.target;
 
  if( target.tagName == "LI") {
    var oldList = document.getElementById("top");
    oldList.id = null;
    var newList = document.createElement("ul");
    newList.id = "top";
    target.appendChild(newList);
    target.className = "bob";
  }
});
 
 
 
whatever.css
li {
  color: blue;
}
 
.bob {
  color: red;
}


sadf