Bloguons JavaScript

Parce que je me dis tout le temps : « Faut que j'écrive ça quelque part. »
Home

Aller au menu | Aller à la recherche

insertAdjacentHTML, alternative à jQuery append(), prepend(), before() et after()

, 10:47 - Lien permanent

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 -->`

Voir la doc sur MDN!