Como moveria um li para o fundo de um ul?

Aug 17 2020

Estou tentando mover um li para o fundo de um ul, mas não consigo descobrir como fazer isso. Eu olhei para Mover os primeiros quatro itens da lista para o final da lista e Mover itens em Ul Li para cima e para baixo (este não funcionou porque era JQuery e estou tentando usar JS), mas também não funcionou . Eu até tentei remover o li e adicioná-lo de volta depois, mas não consegui fazer o onclick funcionar.

Aqui está o 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>

O li que preciso manter na parte inferior é aquele com o id do "botão mais". (Eu digo manter no lugar porque sempre que adiciono um novo item ao ul, ele é adicionado abaixo do "botão mais" li)

A função 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);
}

Respostas

2 AlwaysHelping Aug 17 2020 at 10:04

Você poderia simplesmente usar antes () para fazer isso também por referencingo node(li) que você deseja adicionar antes que ele.

Demonstração ao vivo:

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>