原生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());