网上实现类似方法都是针对相应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);
}
},
手机扫一扫
移动阅读更方便
你可能感兴趣的文章