Li를 UL의 맨 아래로 어떻게 이동합니까?

Question

li를 ul의 맨 아래로 옮기려고하는데 어떻게해야할지 모르겠습니다. 내가 검토 한 목록의 끝으로 이동 처음 네 개의 목록 항목 및 아래로 UL 리튬 최대의 항목을 이동하고 (이 JQuery와 이었기 때문에이 사람은 일을하지 않았다 내가 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

당신은 간단하게 사용할 수있다 () 이전 으로 잘으로 그렇게 할 당신이 원하는 (리)에 전에 추가 할 수 있습니다.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>