在閑來無事的上班時間,想著做一個自己的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ù)均正常,問題應該出現(xiàn)在循環(huán)添加那一步,不明哪里做錯了,請大神不吝賜教~
原生js仿寫append()出現(xiàn)不能理解的問題
慕容3067478
2019-03-19 17:15:03