克隆的元素只能插入一次吗

html部分：

  <ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>

js部分：

var cache =document.getElementById('ul').children[0].cloneNode(true);
for (var i = 0; i < 3; i++) {
  document.getElementById('ul').appendChild(cache);
}

循环应该执行３次，最后运行结果是只插入了一次。求解

---

DOM Node对象的appendChild()方法有一个特性：如果将已存在文档中的一个节点再次插入，那么该节点会从它原来在文档中的位置删除，然后在新的位置重新被插入。
可以用如下代码来验证：

var parentUl = document.getElementById("ul"),
    firstLi = parentUl.children[0];
    parentUl.appendChild(firstLi);

所以第二次与第三次的appendChild()方法不是没有运行，而是之前插入的被克隆节点被隐式删除了而已。