Aller au contenu

La technique pour créer un élément dans le DOM avec le Framework Dojo

Hop, votre formation au Framework Dojo continue.

Apprenez à créer des éléments dans le DOM avec Dojo. Très pratique pour ajouter des div avec du contenu.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

La technique pour créer un élément dans le DOM avec le Framework Dojo

Bonjour à tous et bienvenu sur Développement Facile.

On continu la suite de la série dédiée au Framework Dojo, et là vous allez apprendre à créer des éléments avec le Framework Dojo, créer des éléments div, des éléments paragraphes, définir leur style CSS, leur contenu etc., tout ce que vous pouvez imaginer.

Créer un élément

Vous avez dojo.create, qui va vous permettre de créer un élément, donc le paramètre balise ça définit la balise de l’élément créé, p, div, input,
attrs, ça détermine les attributs de l’élément créé,
refnoeud après c’est optionnel, la référence du nœud par rapport auquel le nœud élément sera placé, et
position c’est un mot clé choisi entre before, after, replace, only, first ou last, avant, après pour remplacer, seulement premier ou le dernier.

Un exemple de création d’un élément div, var.dojo.create div, vous créez une div toute simple, là vous créez une div en dessous, 2eme ligne div avec un inner HTML, vous renseignez le contenu de la div, ou alors vous faites un dojo.create div body, ou vous la placez en première position dans la balise body, tout simplement.

Positionner un élément

Vous avez la possibilité de positionner un élément là ou vous le souhaitez avec dojo.place, le nœud,
Refnoeud, comme tout à l’heure, et la position beofre, after, replace, only, first ou last, comme tout à l’heure, par exemple dojo.place, vous créez une div qui contient module zéro, dans la classe main à la position première, tout simplement.

Voici différents exemples pour placer le module 5 par exemple à la fin de votre classe main, avant la balise main avec before, après la balise main avec after, pour remplacer un élément spécifique avec replace, ça va remplacer l’élément identifié par node, ou pour supprimer tous les autres éléments main et de laisser uniquement module 5, tout simplement.

Peut-être que ça vous parle pas trop cette notion de positionnement, je vais vous montrez un exemple de code source juste à la fin de cette vidéo.

Vider le contenu d’un élément

Vous avez la propriété dojo.empty qui vide tous les enfants de l’élément lui-même, du bloc lui-même, tout en préservant le nœud élément lui-même.

Un exemple de code source ce sera beaucoup plus parlant, je vous ai placé certaines choses en commentaires, vous les essaierez à votre tour, là on va insérer bonjour tout le monde, insertion Dojo bonjour tout le monde, il n’apparaît pas, le module 0, donc on le place en premier, il est là le module 0, après le module 5 on le place à la fin, le module 5 after après le menu ici, et la pour faire un replace et un supprime et là avant le menu, main, vous avez main ici, avec id main, donc avant le menu, après le menu. Vous avez également la classe none, pour le remplacer, tout simplement, la fonction empty, donc empty, il sera appelé sur ce bouton là, vous avez un bouton, une balise button sur le onclik vous appelez empty, vous faites dojo.empty texte, donc ça va récupérer ici, texte. Suppression du contenu.

Votre plan d’actions !

Encore un exemple relativement simple que vous pouvez télécharger directement sous ce cours vidéo, si vous avez des questions, posez-les également sous ce cours vidéo, et moi je vous dis à très bientôt sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple Dojo

Retrouvez le code source JavaScript commenté.

[file_download style= »2″][download title= »Ajouter des éléments dans le DOM avec Dojo » icon= »style1-Html-64×64.png » file= »https://etnbyixar3c.exactdn.com/wp-content/uploads/2014/04/06-creer-element-DOM-dojo.zip » package= » » level= » » new_window= » »]Code commenté pour ajouter des éléments, div, paragraphes dans une page HTML avec le Framework Dojo.[/download][download title= »Framework Dojo complet : dojo-release-1.9.3″ icon= »style1-Html-64×64.png » file= »https://etnbyixar3c.exactdn.com/wp-content/uploads/2014/04/dojo-release-1.9.3.zip » package= » » level= » » new_window= » »]Code source du Framework Dojo en version dojo-release-1.9.3[/download][/file_download]

Partagez vos applications avec Dojo

Utilisez la zone commentaires, pour poster vos codes sources Dojo les plus intéressants.