Как мне переместить li в конец ul?

Aug 17 2020

Я пытаюсь переместить li в конец ul, но не могу понять, как это сделать. Я посмотрел на перемещение первых четырех элементов списка в конец списка и перемещение элементов в Ul Li вверх и вниз (этот не работал, потому что это был JQuery, и я пытаюсь использовать JS), но ни один из них не работал . Я даже пытался удалить li и добавить его позже, но не смог заставить onclick работать.

Вот улица:

<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". (Я говорю «оставить на месте», потому что всякий раз, когда я добавляю новый элемент в ul, он добавляется под линией «plusbutton»)

Функция 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);
}

Ответы

2 AlwaysHelping Aug 17 2020 at 10:04

Вы могли бы просто использовать ранее () , чтобы сделать это , как хорошо referencingв node(Li) вы хотите добавить перед ним в.

Живая демонстрация:

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>