Element.
Ajoute des éléments ou du texte à la fin du contenu d’un élément.
- Renvoie
undefined- Modifie l’original
- Oui
Exemple
#const status = document.querySelector('#status')
const badge = document.createElement('strong')
badge.textContent = 'online'
status.append(' ', badge, ' depuis 5 minutes')
console.log(status.textContent)
console.log(status.innerHTML)Définition et utilisation
#La méthode append() insère les éléments ou les chaînes donnés comme derniers enfants de l’élément. Elle accepte un nombre quelconque d’arguments, et transforme les chaînes en nœuds de texte, insérés littéralement, et non comme du HTML.
Son équivalent plus ancien, appendChild(), n’accepte qu’un seul nœud, ne gère pas les chaînes et renvoie l’élément ajouté. append() ne renvoie rien, mais elle est plus pratique. La même famille comprend prepend() (insère au début), before() et after() (insèrent à côté de l’élément), ainsi que replaceWith().
Un élément ne peut être qu’à un seul endroit du document. Si vous ajoutez un élément déjà présent sur la page, il sera déplacé, pas copié. Pour le copier, utilisez element.cloneNode(true).
Syntaxe
#element.append(node1, node2, …)
element.append(text)Paramètres
#node1…nodeN
éléments ou chaînes
Les nœuds ou les chaînes à ajouter à la fin, dans l’ordre indiqué.
Plus d’exemples
#const queue = document.querySelector('#queue')
queue.append(queue.firstElementChild)
console.log(Array.from(queue.children, (li) => li.textContent))const box = document.querySelector('#box')
const paragraph = document.createElement('p')
console.log(box.appendChild(paragraph))
console.log(box.append('texte'))
console.log(box.childNodes.length)const steps = document.querySelector('#steps')
const first = document.createElement('li')
first.textContent = 'Étape 1'
steps.prepend(first)
steps.after('Terminé !')
console.log(Array.from(steps.children, (li) => li.textContent))
console.log(steps.nextSibling.textContent)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 pouvez ajouter plusieurs éléments en un seul appel :
append(a, b, c)ouappend(...liste). - Les chaînes passées à
append()sont insérées comme du texte. Si vous voulez insérer du code HTML, utilisezinsertAdjacentHTML(). - Ajouter un élément déjà existant le déplace. Si vous avez besoin d’une copie, appelez d’abord
cloneNode(true).
Entrées associées
#- document.createElement()Crée un nouvel élément HTML avec le nom de balise donné, prêt à être inséré dans la page.
- Element.remove()Supprime un élément du document avec tout son contenu.
- 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.
- Node.textContentLit ou définit tout le texte d’un élément, sans les balises HTML.
- Array.prototype.push()Ajoute des éléments à la fin du tableau et renvoie sa nouvelle longueur.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.