मैं एक ली को उल के नीचे कैसे ले जाऊंगा?

Question

मैं एक उल के नीचे करने के लिए एक झूठ को स्थानांतरित करने की कोशिश कर रहा हूँ, लेकिन यह कैसे करना है पता नहीं कर सकते। मैंने सूची के अंत में पहले चार सूची आइटम ले जाने और उल ली और डाउन में आइटम स्थानांतरित करने पर ध्यान दिया है (यह काम नहीं किया क्योंकि यह JQuery था और मैं JS का उपयोग करने की कोशिश कर रहा हूं), लेकिन न तो काम किया । मैंने भी ली को हटाने और बाद में वापस जोड़ने की कोशिश की है, लेकिन काम करने के लिए 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>

ली को मुझे सबसे नीचे रखने की जरूरत है "प्लसबटन" आईडी के साथ। (मेरा कहना है कि जब भी मैं किसी नई वस्तु को उल में जोड़ता हूं, तो वह "प्लसबटन" ली के नीचे जुड़ जाती है)

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>