Element.
Analyse une chaîne comme du HTML et insère les éléments obtenus à un endroit choisi par rapport à l’élément.
- Renvoie
undefined- Modifie l’original
- Oui
Exemple
#const chat = document.querySelector('#chat')
chat.insertAdjacentHTML('beforeend', '<li>Lucas : Salut, comment va le cours ?</li>')
chat.insertAdjacentHTML('afterbegin', '<li class="system">Chat ouvert</li>')
console.log(Array.from(chat.children, (li) => li.textContent))Définition et utilisation
#La méthode insertAdjacentHTML(position, html) transforme une chaîne en éléments HTML et les insère à côté de l’élément ou à l’intérieur de celui-ci. Contrairement à une affectation à innerHTML, elle ne supprime pas le contenu existant, donc les anciens éléments, leurs écouteurs d’événements et leur état restent intacts.
Le premier argument précise l’endroit : "beforebegin" avant l’élément, "afterbegin" au début de son intérieur, "beforeend" à la fin de son intérieur, et "afterend" après l’élément. Les positions "beforebegin" et "afterend" exigent que l’élément ait un parent.
Comme avec innerHTML, le texte inséré est interprété comme du code. Ne passez pas à cette méthode des données venant de l’utilisateur sans les nettoyer. Pour insérer du texte en toute sécurité, utilisez insertAdjacentText(), et pour des éléments déjà prêts, insertAdjacentElement().
Syntaxe
#element.insertAdjacentHTML(position, html)Paramètres
#position
chaîne
L’endroit d’insertion :"beforebegin","afterbegin","beforeend"ou"afterend".html
chaîne
Le code HTML à analyser et à insérer.
Plus d’exemples
#const target = document.querySelector('#target')
target.insertAdjacentHTML('beforebegin', '<p>1. beforebegin</p>')
target.insertAdjacentHTML('afterbegin', '<b>2. afterbegin </b>')
target.insertAdjacentHTML('beforeend', '<b> 3. beforeend</b>')
target.insertAdjacentHTML('afterend', '<p>4. afterend</p>')
console.log(target.previousElementSibling.textContent)
console.log(target.textContent)
console.log(target.nextElementSibling.textContent)const feed = document.querySelector('#feed')
const button = document.querySelector('#load')
button.addEventListener('click', () => {
button.insertAdjacentHTML('beforebegin', '<p>Nouvelle actualité</p>')
console.log('Entrées :', feed.querySelectorAll('p').length)
})
button.click()
button.click()
console.log(button.isConnected)Le bouton et son écouteur de clic continuent de fonctionner, car les nouvelles entrées sont ajoutées à côté, et non par une reconstruction complète du contenu comme avec innerHTML +=.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Pour ajouter des éléments à une liste, préférez
insertAdjacentHTML("beforeend", html)àinnerHTML +=. Les éléments existants et leurs événements restent intacts. - Insérez les données venant de l’utilisateur via
insertAdjacentText()outextContent, jamais comme du HTML. - Les noms des positions sont faciles à retenir : « begin » et « end » désignent la balise ouvrante et la balise fermante de l’élément, et « before » et « after » indiquent de quel côté de la balise atterrit le nouveau code.
Entrées associées
#- Element.innerHTMLLit ou remplace le contenu d’un élément sous forme de code HTML.
- Element.append()Ajoute des éléments ou du texte à la fin du contenu d’un élément.
- document.createElement()Crée un nouvel élément HTML avec le nom de balise donné, prêt à être inséré dans la page.
- Node.textContentLit ou définit tout le texte d’un élément, sans les balises HTML.
- Template literalsDes templates de texte entre guillemets inversés : ils insèrent des valeurs via ${} et peuvent s’étendre sur plusieurs lignes.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.