Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
​
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  </head>
  <body>
    <ul id="fruits"></ul>
    
    <button id="showFruits">Show Fruits</button>
  </body>
</html>
 
$(function(){
  
  // listen for a click event
  // call an anonymous function click event happens
  $("#showFruits").click(function(){
​
      // create a variable with fruit names
      let fruits = ['apple', 'oranges', 'pears', 'bananas']; 
  
      // iterate (loop through array), we automatically get access to the 
      // element and the index variables
      $.each(fruits, function(index, element){
        console.log("index: " + index + "  fruit: " + element);
    
        $("#fruits").append("<li>" + element  + "</li>");
      });
  });
});
Output

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

Dismiss x