Comment créer du HTML avec jQuery ?

Réponses rédigées par Antoine

Dernière mise à jour : 2020-05-14 14:32:40

Question

J'ai une balise <div> dans laquelle je voudrais insérer une autre balise HTML <div>, est-ce possible avec jQuery ?

Réponse

Vous pouvez utiliser les méthodes append(), appendTo(), prependTo(), et d'autres, pour créer du HTML et le positionner en fonction d'un élément HTML donné, via jQuery.

Dans l'exemple ci-dessous on attribue un ID nommé test à la balise <div> d'origine, puis on utilise la méthode prependTo() pour y insérer une nouvelle balise <div> avec son contenu.

<!DOCTYPE html>   
<html>   
<head>
<meta charset="UTF-8">
<title>Comment créer du HTML avec jQuery ?</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
</head>       
<body>   
<div id="test"></div> 
<script>  
 $('<div id="nouveau">1FORMATIK' + '.com</div>').prependTo($('#test'));
</script>  
</body>
</html>

Remarque : Vous pourriez par ailleurs vous passer de jQuery en utilisant la propriété JavaScript Element.innerHTML.

Référez vous à cette page du site de Mozilla pour d'avantage d'information sur cette dernière méthode.