Créer des éléments

const li = document.createElement("li");
li.textContent = "Pain";
document.querySelector("#courses").append(li);

createElement fabrique un élément, append le place à la fin d'un autre ; remove() retire un élément de la page.

innerHTML et la saisie de l'utilisateur

innerHTML interprète un texte comme du HTML :

liste.innerHTML += "<li>" + saisie + "</li>";   // DANGEREUX

Si la saisie contient <img src=x onerror="...">, le navigateur crée une image et exécute le code qu'elle transporte : c'est une faille XSS. Sur un site où les textes des uns s'affichent chez les autres, n'importe qui peut alors agir à la place des autres visiteurs.

textContent, lui, place toujours du texte : les chevrons s'affichent comme des chevrons.

Règle : une donnée qui vient de l'utilisateur passe par textContent, jamais par innerHTML.

Vider un champ, lui rendre la main

champ.value = "";
champ.focus();