How would I move an li to the bottom of a ul?

Question

I am trying to move an li to the bottom of a ul, but can't figure out how to do it. I've looked at Move the first four list items to the end of the list and Move items in Ul Li up and down (this one didn't work because it was JQuery and I'm trying to use JS) , but neither worked. I've even tried to remove the li and add it back afterward, but couldn't get onclick to work.

Here is the 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>

The li that I need to keep at the bottom is the one with the "plusbutton" id. (I say keep in place because whenever I add a new item to the ul, it gets added below the "plusbutton" li)

The add_option function:

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);
}

Sounds more like a problem with how you insert new ones. look into how `insertBefore()` works. https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore — charlietfl, Aug 17 '20 at 02:50
@charlietfl I've tried insertBefore(), but couldn't get it to work. — User-92, Aug 17 '20 at 02:53
How do you call this `add_option()` function - on a button click ? — Always Helping, Aug 17 '20 at 02:55
Oh, wait. I read more in the developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore that charlietfl linked and realized that I was defining the plusbutton list as the insertBefore version (the sorted version). When I fixed it I got the desired result. — User-92, Aug 17 '20 at 03:01

score 2 · Accepted Answer · answered Aug 17 '20 at 03:04

You could simply use before() to do that as well by referencing the node (li) you want to add before it to.

Live Demo:

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>

I was also able to get it to work with `listpb = listUl.insertBefore(listpb, null)` . I wasn't able to get this to work before because I didn't define listpb as the ordered one (It was just `listUl.insertBefore(listpb, null)`). — User-92, Aug 17 '20 at 03:12
@User-92 Nice. You can either one of function. `InsertBefore` expects two `arguments` once the reference second the new node. While in your case you just wanted to add before the `plusbutton` so using `before()` would be ideal but its up to what suits you best ;) — Always Helping, Aug 17 '20 at 03:17

How would I move an li to the bottom of a ul?

1 Answers1