insertAdjacentHTML, alternative à jQuery append(), prepend(), before() et after()
Billet très court. Ce remplacement est assez facile à réaliser.
Ce remplacement est assez facile à réaliser.
<div id='moi'>
<p>C'est bon?</p>
</div>
Ici, on veut ajouter la réponse "Oui!" à cette question, dans l'élément #moi.
En jQuery, on ferait comme ça :
$("#moi").append('<p>Oui!</p>');
En JavaScript vanille, on fera comme ça :
document.getElementById('moi').insertAdjacentHTML('beforeend','<p>Oui!</p>');
Effectivement, la formulation en vanille est évidemment plus longue. Par contre, elle est plus rapide à exécuter.
Pas juste ça.
insertAdjacentHTML() peut servir à insérer du code HTML à quatre endroits différents relatifs à l'élément concerné. Il remplace donc les méthodes jQuery append(), prepend(), before() et after().
<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->`