jQuery: Add a list elements within an unordered list element

jQuery Practical exercise Part - I : Exercise-14

Add a list elements within an unordered list element using jQuery.

Sample solution :

HTML Code :

<!DOCTYPE html>
<script src="https://code.jquery.com/jquery-git.js"></script>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Add li in an existing ul.</title>
  <div id="header">
  <li><a href="https://www.w3resource.com/python/python-tutorial.php">Python</a></li>
  <li><a href="https://www.w3resource.com/php/php-home.php">PHP</a></li>
  <input type="button" value="Click to add new li element" onclick="new_element()" />

JavaScript Code :

function new_element(){
$("#header ul").append('<li>Java</li>');

See the Pen jquery-practical-exercise-14 by w3resource (@w3resource) on CodePen.

Contribute your code and comments through Disqus.

Previous: Select values from a JSON object using jQuery.
Next: Using jQuery remove all the options of a select box and then add one option and select it.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

Follow us on Facebook and Twitter for latest update.