¿Cómo movería un li al final de un ul?
Estoy tratando de mover un li al final de un ul, pero no sé cómo hacerlo. Miré Mover los primeros cuatro elementos de la lista al final de la lista y Mover elementos en Ul Li hacia arriba y hacia abajo (este no funcionó porque era JQuery y estoy tratando de usar JS), pero ninguno funcionó . Incluso intenté eliminar el li y volver a agregarlo después, pero no pude hacer clic para que funcione.
Aquí está el 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>
El li que necesito mantener en la parte inferior es el que tiene la identificación "plusbutton". (Digo mantener en su lugar porque cada vez que agrego un nuevo elemento a ul, se agrega debajo del "plusbutton" li)
La función 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);
}
Respuestas
Simplemente puede usar before () para hacer eso también por referencing
el node
(li) que desea agregar antes.
Demo en vivo:
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>