document.
Crée un nouvel élément HTML avec le nom de balise donné, prêt à être inséré dans la page.
- Renvoie
- Un nouvel élément (
HTMLElement), pas encore connecté au document.
Exemple
#const list = document.querySelector('#tasks')
const item = document.createElement('li')
item.textContent = 'Faire le quiz'
item.classList.add('new')
console.log(item.isConnected)
list.append(item)
console.log(item.isConnected)
console.log(list.lastElementChild)
console.log(list.children.length)Définition et utilisation
#La méthode document.createElement() crée un nouvel élément vide, par ex. li, div ou button. Pour l’instant, il n’existe qu’en mémoire : il n’apparaît pas sur la page tant que vous ne l’insérez pas dans le document avec append(), prepend(), before() ou after().
Avant de l’ajouter, vous pouvez le préparer : définir son texte avec textContent, ses classes avec classList, ses attributs avec setAttribute() ou ses propriétés (id, href, type), et y attacher des écouteurs d’événements. Cette façon de construire est plus sûre que d’assembler du HTML dans une chaîne, car le texte ne sera jamais traité comme du code.
Quand vous ajoutez plusieurs éléments à la fois, passez-les tous à un seul appel d’append(), ou regroupez-les dans un DocumentFragment. Le navigateur met alors la page à jour une seule fois au lieu de plusieurs.
Syntaxe
#document.createElement(tagName)Paramètres
#tagName
chaîne
Le nom de la balise, par ex."li","button"ou"img". La casse n’a pas d’importance.
Plus d’exemples
#const button = document.createElement('button')
button.type = 'button'
button.textContent = 'Afficher l’indice'
button.addEventListener('click', () => console.log('Indice : utilisez une boucle for...of'))
document.querySelector('#toolbar').append(button)
button.click()const players = [
{ name: 'Léa', points: 320 },
{ name: 'Lucas', points: 280 },
{ name: 'Emma', points: 250 }
]
const items = players.map((player) => {
const li = document.createElement('li')
li.textContent = `${player.name}: ${player.points} pts`
return li
})
document.querySelector('#ranking').append(...items)
console.log(document.querySelectorAll('#ranking li').length)
console.log(document.querySelector('#ranking li').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
#- Un nouvel élément n’apparaît pas sur la page tant que vous ne l’avez pas inséré, par ex. avec
append(). - Définissez le texte avec
textContent. Vous n’avez alors pas à vous soucier des caractères spéciaux ni de la sécurité. - Insérez plusieurs éléments en un seul appel
append(...éléments), plutôt que de les ajouter un par un dans une boucle.
Entrées associées
#- Element.append()Ajoute des éléments ou du texte à la fin du contenu d’un élément.
- Node.textContentLit ou définit tout le texte d’un élément, sans les balises HTML.
- Element.classListUn objet pour ajouter, retirer, basculer et vérifier les classes CSS d’un élément.
- Element.setAttribute()Définit la valeur d’un attribut HTML d’un élément, ou en ajoute un nouveau.
- Element.innerHTMLLit ou remplace le contenu d’un élément sous forme de code HTML.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.