Bir li'yi ul'nin altına nasıl taşıyabilirim?

Question

Bir li'yi ul'nin altına taşımaya çalışıyorum ama nasıl yapılacağını çözemiyorum. Ben baktım listenin sonuna taşı ilk dört liste öğeleri ve aşağı Ul Li yukarı öğeleri taşıyın ve (o JQuery çünkü bu bir işi yoktu ve ben JS kullanmaya çalışıyorum), ama hiçbiri çalıştı . Hatta li'yi kaldırmayı ve daha sonra tekrar eklemeyi denedim, ancak çalışmak için tek tıklama alamadım.

İşte 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>

Altta tutmam gereken li, "artı düğmesi" kimliğine sahip olandır. (Yerde kal diyorum çünkü ul'ye her yeni öğe eklediğimde, "artı düğmesinin" altına eklenir)

Add_option işlevi:

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

Sadece kullanabilirsiniz () önce de tarafından bunu istediğiniz (li) için ondan önce ekleyin.referencingnode

Canlı 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>