Comment déplacer un li au bas d'un ul?

Question

J'essaye de déplacer un li vers le bas d'un ul, mais je n'arrive pas à comprendre comment le faire. J'ai regardé Déplacer les quatre premiers éléments de la liste à la fin de la liste et Déplacer les éléments dans Ul Li de haut en bas (celui-ci ne fonctionnait pas car c'était JQuery et j'essaie d'utiliser JS), mais aucun n'a fonctionné . J'ai même essayé de supprimer le li et de le rajouter par la suite, mais je n'ai pas pu démarrer le clic.

Voici l'ul:

<ul class="role_box_roles" id="rbroles">
    <li class="role_box_role" style="border-color: rgb(255, 0, 0);">
        <button class="role_remove_button" type="button" style="background-color: rgb(255, 0, 0);">-</button>
        <span>Staff</span>
    </li>
    <li id="plusbutton"><button class="role_add" type="button" onclick="show_options()">+</button></li>
</ul>

Le li que je dois garder en bas est celui avec l'identifiant "plusbutton". (Je dis garder en place parce que chaque fois que j'ajoute un nouvel élément à l'ul, il est ajouté sous le "plusbutton" li)

La fonction add_option:

function add_option(optionname) {
    var listItem = document.createElement("li");
    var removeButton = document.createElement("button");
    var optionSpan = document.createElement("span");

    listItem.className = "role_box_role";
    listItem.style = "border-color: rgb(255, 0, 0);";

    //removeButton.type = "button";
    removeButton.innerText = "-";
    removeButton.className = "role_remove_button";
    removeButton.style = "background-color: rgb(255, 0, 0);";

    optionSpan.innerText = optionname;

    listUl = document.getElementById("rbroles");
    listUl.appendChild(listItem);
    listItem.appendChild(removeButton);
    listItem.appendChild(optionSpan);
}

Answer 1

Vous pouvez simplement utiliser before () pour le faire également par referencingle node(li) que vous souhaitez ajouter avant.

Démo en direct:

function add_option(optionname) {
  var listItem = document.createElement("li");
  var removeButton = document.createElement("button");
  var optionSpan = document.createElement("span");

  listItem.className = "role_box_role";
  listItem.style = "border-color: rgb(255, 0, 0);";

  //removeButton.type = "button";
  removeButton.innerText = "-";
  removeButton.className = "role_remove_button";
  removeButton.style = "background-color: rgb(255, 0, 0);";

  optionSpan.innerText = optionname;
  listItem.appendChild(removeButton);
  listItem.appendChild(optionSpan);
 
  // Get reference node
  var referenceNode = document.querySelector('#plusbutton');

  // Add the new node before the reference node
  referenceNode.before(listItem);
}

<ul class="role_box_roles" id="rbroles">
  <li class="role_box_role" style="border-color: rgb(255, 0, 0);">
    <button class="role_remove_button" type="button" style="background-color: rgb(255, 0, 0);">-</button>
    <span>Staff</span>
  </li>
  <li id="plusbutton"><button class="role_add" type="button" onclick="show_options()">+</button></li>
</ul>


<button onclick="add_option('Blah')">
  Add
</button>