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

Voir la doc sur MDN!

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.

Ajouter un rétrolien

URL de rétrolien : https://javascript.pruneau.ca/trackback/14

Haut de page