Comment ajouter et déplacer des éléments avec le DOM et AJAX

Et voici la suite du cours consacré au DOM avec AJAX.

Apprenez à ajouter des nouveaux éléments dans votre page HTML, et cela sans recharger votre page web.

Tout est dans la formation ci-dessous.

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

Comment ajouter et déplacer des éléments avec le DOM et AJAX

Bonjour à tous et bienvenu sur Développement Facile.

Dans le cours précédent vous avez vu les bases du DOM, étant donné que c’est très important avec JavaScript et Ajax, voici un nouveau cours sur le DOM, vous pour être beaucoup plus complet.

Modifier la hiérarchisation

Qu’est-ce qu’on va voir cette fois-ci ensemble ? je vais vous donner différentes méthodes pour modifier la hiérarchisation, pour modifier votre page html pour résumer, on va faire simple, toujours simplifié.
La méthode createElement elle permet comme son nom le suggère, de créer un nouvel élément, vous faites $document.createElement h1 ça va vous créer une balise h1. Document.createElement div, ça va vous créer un nouveau bloc div et vous pouvez le compléter, rajouter des choses dedans, avec par exemple, la méthode createTextNode ça créé un autre texte dans le document donc document.createTextNode, et vous donnez le contenu de texte.
Il faut savoir que l’élément ainsi créé n’apparait pas encore dans votre document, quand je dis document, c’est votre page HTML, il faut utiliser les méthodes appendChild ou insertBefore pour l’ajouter, pour afficher votre élément dans votre page HTML.

AppendChild, on y arrive, justement, cette méthode ajoute un élément comme dernier nœud enfant du nœud spécifié en argument, la méthode appendChild ça applique toujours un nœud parent, par exemple, document.getElementByTagName, vous récupérez un élément, pt.parentNode.appendChild pt, vous rajoutez un nouvel élément dans votre page HTML.

Vous avez également la méthode insertBefore, ça permet d’insérer un nœud avant un autre nœud, cette méthode est utilisée lorsque l’on souhaite ajouter un élément sans qu’il devienne le dernier élément enfant, avec appendChild, ça là … tchout,… en dernier, insertBefore ça va l’ajouter avant, par exemple bd.parentNode.insertBefore ba,be, donc l’élément inséré et vous spécifiez l’élément à intégrer avant le node pour l’insérer avant.

Vous avez la méthode replaceChild, qui, comme son nom l’indique, remplace un nœud par un autre nœud, le nœud ainsi remplacé est supprimé, ainsi que tous ces nœuds enfants, vous utilisez bd.parentNode.replaceChild ba,be, la nœud a remplacé et le nœud qui sera remplacé.

Vous avez la méthode removeChild qui, comme son nom l’indique, supprime le nœud également tous ses enfants, vous faites un document.getElementsByTagName, byId, ce que vous voulez, faites be.parentNode.removeChild bd, le nœud que vous souhaitez supprimer, ça va complètement, si vous mettez une balise div, ça va complètement supprimer la balise div de votre page HTML, très pratique.

Exemple d’application

Je vous montre un exemple de code source, ça vous parlera beaucoup mieux que le cours. Alors c’est le même formulaire que tout à l’heure avec le nom, le prénom, la liste, là il y a un titre et quatre boutons d’actifs. Alors qu’est-ce qu’on fait ?
Sur déplacer le titre, ça va déplacer le titre, le bouger, on récupère getElementById, le titre, il n’y en a qu’un, c’est facile, et on va le déplacer .parentNode.appendChild stitle, donc on le place après le bouton 1, les boutons 1 2 3 4, déplacer le titre, il est placé après le bouton 1.
Je recharge la page, ensuite on ajoute un élément addBalise, ont créé la balise p avec du texte, et on l’ajoute, tout simplement, ici, on ajoute l’élément à la fin de la méthode Développement Facile.
Je recharge la page, ensuite on déplace au milieu, déplacé au milieu, movetitleMiddle, qu’est-ce que ça fait ?
On récupère notre élément titre, on récupère notre élément bouton, et on fait un insert before, donc sTitle avant le bouton 2, ici, stitle est inséré avant le deuxième bouton.

Vous voyez c’est très simple de manipuler le DOM lorsqu’on utilise des méthodes, les bases, lorsqu’on a les fondations, c’est comme une maison, si vous avez des fondations très solides en programmation, votre maison sera très solide. Vos applications seront très solides, et supprimer la liste, qu’est-ce qu’on fait pour supprimer la liste ?
getElementById liste, une liste avec un ID, il n’y en a qu’une, ici, on fait un removeChild, sur oliste, voyez, la liste est là, elle est supprimée.

Votre plan d’actions !

Un exemple très simple de ce qui est possible de faire avec le DOM pour manipuler le contenu de votre page html, soit ajouter, supprimer des éléments, donc le DOM vous sera très utile, même pas déplacer des éléments dans votre page html, le DOM vous allez l’utiliser tout le temps avec Ajax, si vous avez des questions posez-les sous ce cours vidéo, et moi je dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple DOM

Et voici le code source de l’exemple du cours.

Comment utilisez-vous le DOM

Dites-moi, dans les commentaires, comment vous utilisez le DOM dans vos applications AJAX et avec le code source.