Comment puis-je créer un nouvel élément du DOM ?

$( elementVide, objetJSON ).appendTo( selecteurJQuery );

$( "<div/>", { "id" : "maDivID" }).appendTo( "section.conteneur" );

La construction débute obligatoirement par un élément vide, on ne peut pas écrire : <div id="monID"/>.

Cette technique est particulièrement utile lors de l'écriture de plugins ou de widgets, et pour ajouter un fragment au DOM lorsque son existence ou son contenu est conditionné par le résultat d'un script.

Exemple

Ajoutez une nouvelle division d'ID "maDivID", avec la classe "maClass" et l'attribut "title". Cette division doit réagir au clic et au survol du pointeur.

$( "<div/>", {
	"id" : "maDivID",
	"class" : "maClass",
	"title" : "Ma nouvelle division est géniale !",
	"html" : '<p>Un mot<br/>pour remplir.</p>',
	"css" : {
		"margin" : "1.2rem",
		"padding" : "0.6rem",
		"font-size" : "2rem",
		"background-color" : "#ced0d7",
		"border" : "0.1rem solid gray",
		"cursor": "pointer"
	},
	"click" : function( event ){
		console.log( new Date( event.timeStamp ) );
	},
	"mouseenter" : function(){
		$( this ).css( "color", "red" );
	},
	mouseleave:function(){
		$( this ).css( "color", "black" );
	}
}).appendTo( "section.conteneur" );