jQuery: Add a list elements within an unordered list element

Last update on May 30 2022 10:20:13 (UTC/GMT +8 hours)

jQuery Practical exercise Part - I : Exercise-14

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

Sample solution :

HTML Code :

<!DOCTYPE html>
<html>
<head>
<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>
  </head>
  <body>
  <div id="header">
  <ul>
  <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>
  </ul>
  </div>
  <input type="button" value="Click to add new li element" onclick="new_element()" />
  </body>
  </html>

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.