Comment ajouter des éléments dans le DOM avec jQuery

Vous pouvez ajouter ou insérer des éléments dans le DOM à l’aide de deux méthodes append() ou prepend() de jQuery. La méthode append() insère le contenu à la fin des éléments correspondants, tandis que la méthode prepend() insère le contenu au début des éléments correspondants.
 
 
L’exemple suivant vous montrera comment ajouter facilement de nouveaux éléments à la fin d’une liste à l’aide de la méthode append() de jQuery.
 

Code source :
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ajouter des éléments dans le DOM</title>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("button").click(function(){
					$("ul").append("<li>lorem ipsum</li>"); 
				});
			});
		</script>
	</head>
	<body>
		<button>Ajouter un élément</button>
		<ul>
			<li>lorem ipsum</li>
			<li>lorem ipsum</li>
			<li>lorem ipsum</li>
		</ul>
	</body> 
</html>
Résultat
  • lorem ipsum
  • lorem ipsum
  • lorem ipsum

Pareil, vous pouvez ajouter des éléments au début des éléments correspondants.
 
 
L’exemple suivant vous montrera comment ajouter un en-tête HTML au début d’un paragraphe à l’aide de la méthode prepend() de jQuery.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ajouter des éléments dans le DOM</title>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("button").click(function(){
					$("p").prepend("<h1>Ceci est un titre</h1>"); 
				});
			});
		</script>
	</head>
	<body>
		<p>Ceci est un paragraphe.</p>
		<button>Ajouter un titre</button>
	</body> 
</html>
Résultat

Ceci est un paragraphe.

QCM jQueryQCM jQuery – Partie 1QCM sur jQuery avec des réponses pour la préparation des test techniques, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus
Partagez cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *