如何使parentAode中的insertAfter

-1

我有一个ul.li，我需要制作一个按钮，将带有按钮的特定li 并将其向下移动一个位置。因为没有“insertAfter”参考，所以我无法找到下一个.li的并进行组装。如何使parentAode中的insertAfter

我的代码：

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给了按钮和特定按钮

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); 
    }

来源

2017-09-04 Chen Ginsberg

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement –

你可以只阅读了关于如何的insertBefore工作... HTTPS：//developer.mozilla .org/en-US/docs/Web/API/Node/insertBefore：_“如果referenceNode为null，则newNode会插入子节点列表的末尾。”_ – CBroe

，您仍然可以使用insertBefore：

要移动el （en确保el.previousElementSibling != null）：
- el.parentNode.insertBefore(el, el.previousElementSibling)
- el.parentNode.insertBefore(el.previousElementSibling, el.nextElementSibling)
要移动el下，采取el.nextElementSibling和移动它（确保它不是null）后：
- el.parentNode.insertBefore(el.nextElementSibling, el)
- el.parentNode.insertBefore(el, el.nextElementSibling.nextElementSibling)

来源

2017-09-04 11:48:56 Bergi

谢谢，我错过了我的视频和读取。 –

如何使parentAode中的insertAfter

回答

相关问题