原生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

如果被插入的节点已经存在于当前文档的文档树中,则那个节点会首先从原先的位置移除,然后再插入到新的位置.

如果你需要保留这个子节点在原先位置的显示,则你需要先用Node.cloneNode方法复制出一个节点的副本,然后在插入到新位置.

    this.elements.forEach(function(value,index,arr){
        var ele = document.createElement(tagName);
        ele.innerHTML = content;
        value.appendChild(ele);
    })

appendChild

Answer 2

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