javascript - .insertBefore 每四次单击不执行任何操作

Question

问题

我有几行简单的代码，但无法理解为什么 .insertBefore 每隔四次点击就不起作用。

<小时/>

HTML

<ul id="container">
    <li>1
    <li>2
    <li>3
</ul>
<button id="button">change</button>

<小时/>

Javascript

var button = document.getElementById('button');
button.addEventListener('click', changeIt, false);

function changeIt(){
    // alert('hi'); (checked that function is running 4th time)
    var container = document.getElementById('container');
    var first = container.firstChild;
    var last = container.lastChild;
    container.insertBefore(last, first);
    // alert(last); >> shows last item is a text node every 4th time
}

<小时/>

fiddle

http://jsfiddle.net/FuFtF/27/

Answer 1

我明白了!...第四次，insertBefore 不是替换 HTML 元素，而是替换文本对象。

我将确保测试该变量是否是具有如下 nodeType 的 HTML 元素:

// if it's an html element, the nodeType must be 1
// if it's not
if(last.nodeType !== 1){
    // remove it,
    last.remove();
    // again grab last item
    last = container.lastChild;
}