插入和追加内容到DOM的函数

来源:互联网 发布:java中iterator是什么 编辑:程序博客网 时间:2024/05/12 21:32

 //创建元素
function create(elem){
 return document.createElementNS ?
 document.createElementNS('http://www.w3.org/1999/xhtml',elem):
 document.createElement(elem);
}
//插入和追加的辅助函数
function checkElem(a){
 var r = [];
 if(a.constructor != Array){
  a = [a];
 }
 for(var i=0;i<a.length;i++){
  if(a[i].constructor== String){
   var div = document.createElement("div");
   div.innerHTML = a[i];
   for(var j=0;j<div.childNodes.length;j++){
    r[r.length] = div.childNodes[j];
   }
  }else if(a[i].length){
   for(var j=0;j<a[i].length;j++){
    r[r.length] = a[i][j];
   }
  }else{
   r[r.length] = a[i];
  }
 }
 return r;
}
//插入函数,如下用法:

function before(parent,before,elem){
 if(elem == null){
  elem = before;
  before = parent;
  parent = before.parentNode;
 }
 var elems = checkElem(elem);
 for(var i=elem.length-1;i>=0;i--){
  parent.insertBefore(elems[i],before);
 }
}

//追加函数
function append(parent,elem){
 var elems = checkElem(elem);
 for(var i=0;i<=elems.length;i++){
  parent.appendChild(elems[i]);
 }
}
//使用方法
//<ol>
//<li>cats.</li>
//<li>dogs.</li>
//<li>mics.</li>
//</ol>
append(tag("li")[0],"<li>mouse trap.</li>");
//变成
//<ol>
//<li>cats.</li>
//<li>dogs.</li>
//<li>mics.</li>
//<li>mouse trap.</li>
//</ol>
before(last(tag("li")[0]),"<li>Zerbra.</li>");
//变成
//<ol>
//<li>cats.</li>
//<li>dogs.</li>
//<li>Zerbra.</li>
//<li>mics.</li>
//</ol>

原创粉丝点击