Element.
Remplace un élément du document par d’autres éléments ou du texte. L’ancien élément est retiré de la page.
- Renvoie
undefined- Modifie l’original
- Oui
Exemple
#const buyButton = document.querySelector('#buy')
const badge = document.createElement('span')
badge.className = 'badge'
badge.textContent = 'Acheté ✓'
buyButton.replaceWith(badge)
console.log(buyButton.isConnected)
console.log(document.querySelector('.card').lastElementChild)
console.log(document.querySelector('#buy'))Définition et utilisation
#La méthode replaceWith() insère les nœuds ou les chaînes donnés à la place de l’élément, et retire l’élément lui-même du document. Le nouveau contenu atterrit exactement là où était l’ancien élément : il a le même parent et les mêmes voisins.
Elle accepte un nombre quelconque d’arguments, donc vous pouvez remplacer un élément par plusieurs. Les chaînes sont insérées comme du texte brut, et non comme du HTML, tout comme dans append(). Si vous passez un élément déjà présent sur la page, il sera déplacé à son nouvel emplacement.
L’élément remplacé ne disparaît pas de la mémoire. Tant que vous en gardez une référence dans une variable, vous pouvez le restaurer plus tard, par ex. avec un nouvel appel à replaceWith(). L’ancienne façon de faire la même chose est parent.replaceChild(nouveau, ancien), qui exige une référence au parent et accepte les arguments dans un ordre moins intuitif.
Syntaxe
#element.replaceWith(node1, node2, …)
element.replaceWith(text)Paramètres
#node1…nodeN
éléments ou chaînes
Les nœuds ou les chaînes qui prendront la place de l’élément, dans l’ordre indiqué.
Plus d’exemples
#const status = document.querySelector('#status')
const points = document.createElement('strong')
points.textContent = '340 pts'
status.replaceWith('7 leçons terminées, ', points)
const paragraph = document.querySelector('p')
console.log(paragraph.textContent)
console.log(paragraph.innerHTML)const title = document.querySelector('#title')
const input = document.createElement('input')
input.value = title.textContent
title.replaceWith(input)
console.log(document.querySelector('#title'))
input.value = 'Note sur les boucles'
title.textContent = input.value
input.replaceWith(title)
console.log(document.querySelector('#title').textContent)Après le remplacement, le titre n’est plus dans le document, mais la variable title le conserve toujours. Il peut ainsi revenir à sa place avec le nouveau texte après l’édition.
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
#- Vous appelez
replaceWith()sur l’élément qui doit disparaître. Vous n’avez pas besoin d’une référence au parent, contrairement àreplaceChild(). - Les chaînes sont insérées comme du texte. Si le nouveau contenu doit être du code HTML, construisez les éléments avec
createElement(), ou insérez le code avecinsertAdjacentHTML()et supprimez seulement ensuite l’ancien élément. - Conservez une référence à l’ancien élément dans une variable si vous devrez le restaurer, par ex. en quittant le mode édition.
Entrées associées
#- Element.remove()Supprime un élément du document avec tout son contenu.
- 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.cloneNode()Crée une copie d’un nœud. Avec l’argument true, elle copie aussi tout le contenu, c’est-à-dire tous les éléments et textes à l’intérieur.
- Element.insertAdjacentHTML()Analyse une chaîne comme du HTML et insère les éléments obtenus à un endroit choisi par rapport à l’élément.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.