JSFiddle - React, Tailwind, and code Playground

HTML

<body onclick="ajout()">
    <br />
    <br />
    <br />
    <ul id="listecommissions">
        <li>1kg de farine</li>
        <li>un pack de lait</li>
        <li id="last">add one more ...</li>
    </ul>
    <form>
        <input type=text id="in2" placeholder="add an ingredient" />
    </form>
</body>

JavaScript

function ajout() {
    var newingredient = document.createElement("li");
    var ingredient = document.getElementById("in2").value;
    var text = document.createTextNode(ingredient);
    newingredient.appendChild(text);
    var lastone = document.getElementById("last");
    var list = document.getElementById("listecommissions");
    list.insertBefore(newingredient, lastone);
}