documentFragment
 

Это понятно: (скриптик расставляет li в ul задом наперед)

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<script>
    var myUl = document.getElementsByTagName("ul")[0];
    var temp = [];
    for (var myLi = myUl.lastChild; myLi != null; myLi = myLi.previousSibling )
        temp.push(myLi);
    for(i = 0; i< temp.length; i++)
        myUl.appendChild(temp[i]);
    //Когда в документ с помощью appendChild вставляется уже существующий элемент
    //он автоматически удаляется из текущей позиции.
</script>

И это тоже понятно:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<script>
var fragment = document.createDocumentFragment();
var myUl = document.getElementsByTagName("ul")[0];
while(myUl.lastChild) fragment.appendChild(myUl.lastChild);
myUl.appendChild(fragment);
</script>

Почему так не работает?:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>


<script>
    var fragment = document.createDocumentFragment();
    var myUl = document.getElementsByTagName("ul")[0];
    for (var k = myUl.lastChild; k != null; k = k.previousSibling)
        fragment.appendChild(k);    
</script>

может это происходит из-за того, что элемент удаляется из текущей позиции?
=> т.е после первого прохода цикла присоединяем k в fragment ( с помощью appendChild) => когда начинаем искать
его соседа - (k = k.previousSibling) то уже ищем его в fragment?

Поэтому массив temp не нужен.

Именно так.

<script>
var myUl = document.getElementsByTagName("ul")[0];
var children = myUl.childNodes;
for (var i = 0; i< children.length; i++) {
myUl.insertBefore(children[i], children[0]);
}
</script>

Только i лучше от 1.