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

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]的孙子节点