为什么函数第三次执行就会出错？

Question

<div class="x">
    <div  id="x1" class="x1">111</div>
    <div id="x2" class="x1">222</div>
    <div id="x3" class="x1">333</div>
</div>
<script>
    function cla(element){
        return document.getElementsByClassName(element);
    }

    function xx(){
        cla("x1")[2].appendChild(cla("x1")[0])

    }
    xx();

    xx();

    xx();
    alert(cla("x1")[0].id)
    alert(cla("x1")[1].id)
    alert(cla("x1")[2].id)
</script>

第三次执行xx()就会报错，这是为什么呢？

Answer 1

第三次执行的时候、cla("x1")[2]是cla("x1")[0]的孙子节点

Answer 2

appendChild()是在添加子节点，而不是insertBefore哦