Làm thế nào để tôi di chuyển một li xuống dưới cùng một ul?
Tôi đang cố gắng di chuyển một li xuống dưới cùng của một ul, nhưng không thể tìm ra cách thực hiện. Tôi đã xem xét Di chuyển bốn mục danh sách đầu tiên đến cuối danh sách và Di chuyển các mục trong Ul Li lên và xuống (cái này không hoạt động vì nó là JQuery và tôi đang cố gắng sử dụng JS), nhưng không hoạt động . Tôi thậm chí đã cố gắng xóa li và thêm nó trở lại sau đó, nhưng không thể làm cho onclick hoạt động.
Đây là 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>
Cái li mà tôi cần giữ ở dưới cùng là cái có id "plusbutton". (Tôi nói là giữ nguyên vị trí vì bất cứ khi nào tôi thêm một mục mới vào ul, nó sẽ được thêm vào bên dưới li "nút cộng")
Hàm 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);
}
Trả lời
Bạn chỉ có thể sử dụng trước khi () để làm điều đó cũng bởi referencingsự node(li), bạn muốn thêm trước khi nó đến.
Bản thử trực tiếp:
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>