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 |
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 |
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 |
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 |
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 |
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 |
1 2 | var elem = document.getElementById('monElement');
elem.remove(); |
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 |
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); |
Source
Envoyé par CapFlow
) ont fait des efforts de compatibilité.