Discussion :

[Bovino]

Le DOM HTML niveau 4 étoffe l'interface Element de plusieurs méthodes particulièrement utiles inspirées de la bibliothèque jQuery.

Six nouvelles méthodes d'insertion et de suppression vont donc apparaitre dans les navigateurs permettant de manipuler plus facilement le DOM du document.

On connaissait déjà entre autre les classiques insertBefore(), appendChild() ou removeChild() mais celles-ci s'avéraient assez peu pratiques à utiliser, en particulier car elles se réfèrent à des éléments parents.

Ces nouvelles méthodes se veulent donc plus souples et plus pratiques à mettre en œuvre.

Les nouvelles méthodes sont les suivantes.

• prepend()

Cette méthode prend en paramètre un nœud ou une chaine correspondant à une portion HTML. Elle permet d'insérer ce paramètre avant le premier élément enfant de l'élément auquel on l'applique.
Exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var elem = document.getElementById('monElement');
elem.prepend('<div>Nouvel élément inséré</div>');

• append()

Cette méthode prend en paramètre un nœud ou une chaine correspondant à une portion HTML. Elle permet d'insérer ce paramètre après le dernier élément enfant de l'élément auquel on l'applique.
Exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var elem = document.getElementById('monElement');
var ajout = document.createElement('div');
ajout.appendChild(document.createTextNode('Contenu ajouté.'));
elem.append(ajout);

• before()

Cette méthode prend en paramètre un nœud ou une chaine correspondant à une portion HTML. Elle permet d'insérer ce paramètre dans l'élément parent (et uniquement si cet élément parent existe) avant l'élément auquel on l'applique.
Exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var elem = document.getElementById('monElement');
elem.before('<div>Élément ajouté avant elem</div>');

• after()

Cette méthode prend en paramètre un nœud ou une chaine correspondant à une portion HTML. Elle permet d'insérer ce paramètre dans l'élément parent (et uniquement si cet élément parent existe) après l'élément auquel on l'applique.
Exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var elem = document.getElementById('monElement');
var ajout = document.createElement('div');
ajout.appendChild(document.createTextNode('Contenu ajouté après elem.'));
elem.after(ajout);

• replace()

Cette méthode prend en paramètre un nœud ou une chaine correspondant à une portion HTML. Elle permet de remplacer dans l'élément parent (et seulement si celui-ci existe) l'élément auquel on applique la méthode par celui passé en paramètre.
Exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var elem = document.getElementById('monElement');
elem.replace('<div>Contenu remplaçant elem</div>');

• remove()

Cette méthode ne prend pas de paramètre. Elle permet de supprimer l'élément auquel elle s'applique de son élément parent (et seulement si celui-ci existe).
Exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var elem = document.getElementById('monElement');
elem.remove();

Support des navigateurs
Le support des navigateurs est assez inégal.
Chrome ne reconnait que la méthode remove().
Opera annonce le support pour certaines versions de Presto.
Safari reconnait les méthodes remove() et replace().
Firefox et Internet Explorer ne supportent pas encore ces méthodes, mais le support est prévu pour Firefox 23.

Tester le navigateur
Pour vérifier si votre navigateur supporte ces nouvelles méthodes, vous pouvez effectuer le test suivant (feature detection) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var elem = document.createElement('div');
console.log('prepend' in elem);
console.log('append' in elem);
console.log('before' in elem);
console.log('after' in elem);
console.log('replace' in elem);
console.log('remove' in elem);

En fonction des résultats du test, vous pouvez utiliser une fonction de remplacement pour pallier ce manque.

Source

[CapFlow]

Mitigé.

C'est assez sympathique (sauf le "append", si j'ai bien compris c'est absolument pareil que appendChild ou .innerHTML += "").
De plus, ce ne sont que des raccourcis, j'avoue plutôt pratiques.

Encore un point, ça devient de plus en plus "permissif", plusieurs façon d'arriver à ses fins. Les fonctions sont plutôt souples.

Et pour finir, le support. Encore un problème de plus. Il faudra soit utiliser des genre de "polyfill" (c'est bien ça ?), des librairies etc ...
jQuery va surement s'adapter pour tester si c'est supporté en natif ou non ... quel est l'intérêt ? Ceux qui utilisent jQuery continueront à utiliser jQuery et donc ça limite pas mal l'utilisation de ces méthodes en natif (VanillaJS pour ceux qui préfèrent).

[alex_vino]

Et pour finir, le support. Encore un problème de plus. Il faudra soit utiliser des genre de "polyfill" (c'est bien ça ?), des librairies etc ...
jQuery va surement s'adapter pour tester si c'est supporté en natif ou non ... quel est l'intérêt ? Ceux qui utilisent jQuery continueront à utiliser jQuery et donc ça limite pas mal l'utilisation de ces méthodes en natif (VanillaJS pour ceux qui préfèrent).

Oui c'est vrai que jQuery nous évite tous ces problemes.
Par contre c'est important de continuer a faire évoluer le JavaScript car toutes les applications ne peuvent pas utiliser jQuery (car autre framework ou plateforme).

[Bovino]

Je suis bien d'accord avec alex_vino et je rajouterai même un argument.
Le fait que ces méthodes deviennent natives de l'API DOM font qu'elles sont optimisées par rapport à ce que fait jQuery.
De ce fait, lorsque jQuery vérifiera (je n'ai pas vraiment regardé s'il le faisait déjà) l'existence de la méthode native ne fera qu'améliorer les performances pour les navigateurs qui supporteront ces méthodes, donc ces nouveautés amélioreront ton code même si tu utilises uniquement jQuery.
C'est déjà ce qui s'est produit avec querySelectorAll() par exemple.

Donc les améliorations du langage ont un impact sur tout le monde y compris ceux qui "croient" ne pas les utiliser.

[CapFlow]

Cela je l'ai bien compris (et d'ailleurs merci jQuery pour querySelector(All) :p ), mais ce qui est embêtant c'est que justement, on fait évoluer le langage et c'est super, je ne demande que ça, mais à côté il y a toujours les navigateurs pas à jour et les donc problèmes de support.
J'aime bien utiliser simplement une propriété-méthode sans devoir toujours rajouter quelque chose pour que ce soit compatible.

[Bovino]

Je te rassure : on aimerait tous ça !
Mais ce n'est malheureusement pas vraiment possible avec JavaScript bien que les éditeurs de navigateurs (y compris IE ) ont fait des efforts de compatibilité.
Seulement, lorsque le langage évolue, il faut tenir compte du temps que cela prend à implémenter et que les utilisateurs ne mettent pas forcément leur navigateur à jour. Or il est difficile de reprocher à un navigateur de ne pas être compatible avec les évolutions ultérieures à sa sortie !

Ensuite, les bibliothèques comme jQuery permettent effectivement de se faciliter le travail et c'est tant mieux, mais cela ne veut pas dire non plus que jQuery (ou autre) doit être systématiquement utilisé, dans beaucoup de cas, ça alourdi inutilement la page.