原生js仿写append()出现不能理解的问题

Question

在闲来无事的上班时间，想着做一个自己的jquery,满足自己开发需要。在处理append()方法时，考虑到class可能存在重名多个元素节点的情况下，对其进行遍历添加需要添加元素节点。js如下所示，通过appendChild()追加元素节点function EQuery(ele){    this.elements = [];    switch(typeof ele){        case "string":            switch(ele.charAt(0)){                case "#": //id                    this.elements.push(document.querySelector(ele));                    break;                case ".": //class                    this.elements = document.querySelectorAll(ele);                    break;                default: // p                    this.elements = document.getElementsByTagName(ele);                    break;            }            break;            default:            console.log('this type is not supported by EQuery');            break;    }    }// EQuery.prototype.append = function(obj){  //     var len = this.elements.length;//     for (var i = 0; i < len; i++) {//         this.elements[i].innerHTML += obj;//     }// }   EQuery.prototype.append = function(obj){    var len = this.elements.length,        content = '',        tagName,        ele;    var reg = /<(\S*?)>(\S*?)<\S*?>/;    if(reg.exec(obj)){        tagName = RegExp.$1;        content = RegExp.$2;    }    ele = document.createElement(tagName);    ele.innerHTML = content;    this.elements.forEach(function(value,index,arr){        value.appendChild(ele);    })}html    <div class="spring"><h4>HI</h4></div>    <div class="spring"><h4>HI</h4></div>    <div class="spring"><h4>HI</h4></div>    <div class="spring"><h4>HI</h4></div>    <div class="spring"><h4>HI</h4></div>    <script>    var springList = $E('.spring');    springList.append('<span>bangbangbang!</span>');    <script>在html中，对class = "spring"的所有div进行追加了'<span>bangbangbang!</span>'，但是在审查元素节点时候，仅最后一个div可以被成功添加，效果图如下所示：打印各项数据均正常，问题应该出现在循环添加那一步，不明哪里做错了，请大神不吝赐教~

Answer 1

嗨，多次 appendChild 一个 node 会从原来的地方 remove 掉的，可以克隆 node 。value.appendChild(ele.cloneNode());