原生js實現jquery的insertBefore 和insertAfter 方法(四)
阿新 • • 發佈:2019-02-17
網上實現類似方法都是針對相應dom節點進行操作,但許多情況下,會拼接好相應html以字串方式直接插入。
前不久做去jquery的時候用到類似方法,這裡簡單的記錄下,直接上程式碼吧
insertAfter方法實現
//某個元素後插入
insertAfter: function (newElement, targetElement) {
targetElement=SeeUtils.getElObj(targetElement);
if(targetElement==null){
return void(0);
}
var parent = targetElement.parentNode;
// 如果最後的節點是目標元素,則直接新增
if (parent.lastChild == targetElement) {
if(typeof newElement === 'string'){
var temp = document.createElement('div');
temp.innerHTML = newElement;
// 防止元素太多 進行提速
var frag = document.createDocumentFragment();
while (temp.firstChild) {
frag.appendChild(temp.firstChild);
}
parent.appendChild(frag);
}else{
parent.appendChild(newElement)
}
} else {
if (typeof newElement === 'string'){
var temp = document.createElement('div');
temp.innerHTML = newElement;
// 防止元素太多 進行提速
var frag = document.createDocumentFragment();
while (temp.firstChild) {
frag.appendChild(temp.firstChild);
}
parent.insertBefore(frag, targetElement.nextSibling);
}else{
//如果不是,則插入在目標元素的下一個兄弟節點 的前面
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
},
insertBefore方法實現:
//某個元素前插入
insertBefore:function(newElement, targetElement){
targetElement=SeeUtils.getElObj(targetElement);
if(targetElement==null){
return void(0);
}
var parent = targetElement.parentNode;
// 如果最後的節點是目標元素,則直接新增
if(typeof newElement === 'string'){
var temp = document.createElement('div');
temp.innerHTML = newElement;
// 防止元素太多 進行提速
var frag = document.createDocumentFragment();
while (temp.firstChild) {
frag.appendChild(temp.firstChild);
}
parent.insertBefore(frag, targetElement);
}else{
parent.insertBefore(newElement, targetElement);
}
},