Comment faire insertAfter dans parentNode

Question

J'ai un ul.li et je dois faire un bouton qui prendra le li avec le bouton et déplacez-le une place vers le bas. Parce qu'il n'y a pas de référence "insertAfter" je ne peux pas trouver comment je prends le suivant .li et le maquiller.

Mon code:

HTML

<ul> 
    <li>amethyst 
    <button class="up">Up</button> 
    <button class="down">Down</button> 
    <button class="remove">Remove</button> 
    </li> 
    <li>lavender 
    <button class="up">Up</button> 
    <button class="down">Down</button> 
    <button class="remove">Remove</button> 
    </li> 
    <li>plums 
    <button class="up">Up</button> 
    <button class="down">Down</button> 
    <button class="remove">Remove</button> 
    </li> 
</ul> 

JS à bouton vers le haut et le bouton spécifique

if(event.target.className == 'up') { 
    let li = event.target.parentNode; 
    var prevLi = li.previousElementSibling; 
    let ul = li.parentNode; 
    if (prevLi) {  
    ul.insertBefore(li, prevLi); 
    } 

if(event.target.className == "down") { 
    var lid = event.target.parentNode; 
    var prevLiD = li.previousElementSibling; 
    let ul = li.parentNode 
    if (prevLiD) { 
    ul.insertBefore(li, prevLi); 
    } 

Answer 1

Vous pouvez toujours utiliser insertBefore:

• Pour déplacer el haut (en sûr que el.previousElementSibling != null):
  • el.parentNode.insertBefore(el, el.previousElementSibling)
  • el.parentNode.insertBefore(el.previousElementSibling, el.nextElementSibling)
• Pour déplacer el vers le bas, prenez le el.nextElementSibling et le déplacer vers le haut (après s'être assuré qu'il n'est pas null):
  • el.parentNode.insertBefore(el.nextElementSibling, el)
  • el.parentNode.insertBefore(el, el.nextElementSibling.nextElementSibling)