Test appendChild(...)

In this example below you will see how to do a Test appendChild(...) with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by FarhanSharif, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright FarhanSharif ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Test appendChild(...)</title>
  
  
  
  
  
</head>

<body>

  <ul id="list"></ul>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/FarhanSharif/test-appendchild-YLVgmX */
document.addEventListener("DOMContentLoaded", function() {
  
  var ul = document.getElementById("list");
  
  // This will only create an element once, so even with a for loop, will add the same element over and over
  /*
  var li = document.createElement("li"); 
  li.className = "item";
  li.innerHTML = "<a>List Item</a>";
  */
  
  for (var i = 0; i < 5; i++) {
    // To append multiple, need to create new element each time
    var li = document.createElement("li"); 
    li.className = "item";
    li.innerHTML = "<a>List Item</a>";
    ul.appendChild(li);
  }
  
});

Comments