Adding and removing menu items

Along with enabling or disabling menu items programmatically, we can also add or remove menu items on the fly. In menu2.html, add the following code immediately after the existing markup:

<p>
  <form>
    <input type="button" id="additem" value="Add menu item" />
  </form>
</p>

Then change the final <script> element to this:

<script>
  $(document).ready(function($){
    $("#myMenu").menu();
    $("#additem").click(function() {
      $("<li><a href='#'>New item</a></li>").appendTo("#myMenu");
      $("#myMenu").menu("refresh");
    });
  });
</script>

Save the changes as menu6.html. On this page, we've added a new <input> element, which we will use to add a new menu item.

In the <script> element, our function handles the addition of a menu item by first building the required markup. We then append this to the myMenu menu, before calling menu's refresh() method to update the display...