原生js仿寫append()出現(xiàn)不能理解的問題

在閑來無事的上班時間，想著做一個自己的jquery,滿足自己開發(fā)需要。
在處理append()方法時，考慮到class可能存在重名多個元素節(jié)點的情況下，對其進行遍歷添加需要添加元素節(jié)點。

js如下所示，通過appendChild()追加元素節(jié)點

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>'，但是在審查元素節(jié)點時候，僅最后一個div可以被成功添加，效果圖如下所示：
圖片描述

打印各項數(shù)據(jù)均正常，問題應(yīng)該出現(xiàn)在循環(huán)添加那一步，不明哪里做錯了，請大神不吝賜教~

回答

編輯回答

不二心

如果被插入的節(jié)點已經(jīng)存在于當(dāng)前文檔的文檔樹中,則那個節(jié)點會首先從原先的位置移除,然后再插入到新的位置.
如果你需要保留這個子節(jié)點在原先位置的顯示,則你需要先用Node.cloneNode方法復(fù)制出一個節(jié)點的副本,然后在插入到新位置.

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

appendChild

2017年5月27日 05:04

編輯回答