移動第一DOM最後的DOM元素後的JavaScript

我想在列表中移動的第一個項目的最後一個項目之後：移動第一DOM最後的DOM元素後的JavaScript

<ul> 
    <li>1 (this DOM element needs to be moved after 1)</li> 
    <li>2</li> 
    <li>3</li> 
</ul>

在jQuery中這是很容易：

$('#scrollable li:last').after($('#scrollable li:first'));

但由於到文件限制我不能使用jQuery或外部庫。我必須使用JavaScript。有沒有人有任何想法，我怎麼才能實現這與香草JavaScript只？任何幫助將非常感激。

更新：感謝@Mano的回答。

來源

2015-11-05 londonfed

您可以使用JavaScript的香草像這樣：在評論

var listitems = document.getElementsByTagName('li'); /* Get all list items */ 
 
var lastitem = listitems[listitems.length - 1]; /* Find the last list item */ 
 
var parentul = lastitem.parentNode; /* Find the parent element of the items */ 
 
parentul.insertBefore(lastitem, listitems[0].nextSibling); /* Replacement for insertAfter() */

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5 (this DOM element needs to be moved after 1)</li> 
 
</ul>

來源

2015-11-05 10:03:55

非常感謝您的回答解釋。它在一定程度上起作用，但我注意到它不像jQuery那樣工作。例如，在jQuery中，順序依然是順序的：2,3,4,1，但在解決方案中，您提供的順序是混合的：1,3,2,4。 – londonfed

我不確定你是什麼意思的混合。在輸出屏幕中，我可以查看'1,5,2,3,4'。這裏是順序的，只是最後一個元素的DOM順序被改變並放置在第一個元素之後。 –

對不起，我很困惑。基本上，jQuery的一段代碼添加了最後一項後的第一項。所以與我所說的相反。我已經更新了你的代碼，現在它可以工作。謝謝你的幫助。 – londonfed

<ul id="list"> 
    <li>1</li> 
    <li>2</li> 
    <li>3 (this DOM element needs to be moved after 1)</li> 
</ul> 


var ul = document.querySelector("#list"); 

var children = ul.children; 

var len = children.length; 

ul.insertBefore(children[len-1],children[1]);

來源

2015-11-05 10:04:04 Ramanlfc

移動第一DOM最後的DOM元素後的JavaScript

回答

相關問題