Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Append LI to UL">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Append LI to UL</title>
</head>
<body>
  
  <div id="inputform">
    
    <p>Click <b>Run with JS</b></p>
    
    <input id="iteminput" type="text" placeholder="Enter Item" />
    
    <button id="submit" type="submit" name="submit">
      Add Item
    </button>
  
  </div>
  
  <div id="listarea">
  
    <ul id="thelist">
    </ul>
  
  </div>
</body>
</html>
 
// reach into DOM and get the button, 
// input, and button
let button = document.getElementById("submit");
let newItem = document.getElementById("iteminput");
let theList = document.getElementById("thelist");
//Modify DOM by adding click to the button
button.addEventListener("click", function(event){
  
  //check if newItem value has data
  if (newItem.value){
    
    // turn text input value into HTML text node
    let textNode = document.createTextNode(newItem.value);
  
 
    //create an li DOM node to insert into the list
    let newListItem = document.createElement("li");
  
    //insert text node into new li node
    newListItem.appendChild(textNode);
  
    //insert li into the ul list
    theList.appendChild(newListItem);
  
    newItem.value = "";
  }
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
pchittumpro
0viewers