Comment ajouter <li> dans une liste <ul> existante en jQuery

juillet 8, 2019février 10, 2020 Amine KOUIS Aucun commentaire

Vous pouvez simplement utiliser la méthode append() de jQuery pour ajouter des éléments <li> dans une liste <ul> existant.

L’exemple suivant ajoutera l’élément <li> à la fin de la liste <ul> en cliquant sur le bouton.

Code source :

<!DOCTYPE html>
<html>
	<head>
		<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
		<script>
			$(document).ready(function(){
				$("button").click(function(){
					$("#langages").append('<li><a href="#">Nouveau langage</a></li>');
				});
			});
		</script>
	</head>
	<body>
		<ul id="langages">
			<li><a href="#">JavaScript</a></li>
			<li><a href="#">HTML</a></li>
			<li><a href="#">CSS</a></li>
		</ul>
		<button type="button">Ajouter un langage</button>
	</body>
</html>