在JavaScript中将第一个DOM移到最后一个DOM元素之后

Question

我正在尝试在最后一个项目之后将列表中的第一个项目移动：

<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的回答。

Answer 1

您可以像这样使用香草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> 

Answer 2

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