liをulの一番下に移動するにはどうすればよいですか？

Question

liをulの一番下に移動しようとしていますが、その方法がわかりません。私が見てきたリストの最後に移動し、最初の4つのリスト項目をし、上下のUI李アップでアイテムを移動し、（それがjQueryのだったので、この1は仕事をしませんでしたし、私はJSを使用しようとしている）が、どちらも働いていません。liを削除して後で追加し直そうとしましたが、onclickを機能させることができませんでした。

これが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>

一番下に保持する必要があるliは、「plusbutton」IDを持つものです。（ulに新しいアイテムを追加するたびに、「plusbutton」liの下に追加されるため、そのままにしておくと言います）

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

あなたは、単に使用することができます（）の前でだけでなくそれを行うためにあなたにそれの前に追加したい（LI）。referencingnode

ライブデモ：

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>