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>
  </head>
  <body>
​
    <div class="container">
      <ul class="nav">
        <li>New York City</li>
        <li>Chicago</li>
        <li>Los Angelas</li>
        <li>Washington D.C.</li>
      </ul>
    </div>
    
    <button id="button">click me</button>
    <script src="https://code.jquery.com/jquery-2.0.3.js"></script>
  </body>
</html>
 
ul.nav {
  list-style-type: none;
}
​
ul.nav li {
  border: 1px solid black;
  padding: 4px;
  width: 200px;
}
​
#text-field-1, #text-field-2 {
  font-size: 18px;
}
 
$(function(){
   // Create html elements that you want to add to your page 
   var vegas = "<li>Las Vegas</li>";
   var boston = "<li>Boston</li>";
​
   
   function addCities() {
     // Select the element you what to add your html to
     //Use jQuery methods like .append() and .prepend() to add your html
​
     $('ul.nav').append(vegas);
     $('ul.nav').prepend(boston);
   }
  
   
   // click listener added to the element with #button
   $('#button').click(addCities);
​
});
Output

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

Dismiss x