封装的函数

一、把节点newElement插入到节点targetElement节点的后面

function insertAfter(newElement,targetElement){
    var parent = targetElement.parentNode;
    if(parent.lastChild == targetElement){
        parent.appendChild(newElement);
    }else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

例子，在#b后面插入一个新的li

 1 <body>
 2     <ul>
 3         <li draggable="true">aa</li>
 4         <li id="b">bb</li>
 5         <li>ss</li>
 6     </ul>
 7 <script>
 8 var target=document.getElementById("b");
 9 var newLi=document.createElement("li");
10 var text=document.createTextNode("新的li内容");
11 target.appendChild(newLi);
12 newLi.appendChild(text);
13 insertAfter(newLi,b);
14 function insertAfter(newElement,targetElement){
15     var parent = targetElement.parentNode;
16     if(parent.lastChild == targetElement){
17         parent.appendChild(newElement);
18     }else{
19         parent.insertBefore(newElement,targetElement.nextSibling);
20     }
21 }
22 </script>
23 </body>

二、页面加载完成后按顺序执行队列的函数

function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function'){
            window.onload = func;
        }else{
            window.onload = function(){
                oldonload();
                func();
            }
        }
        }

例：页面加载完成后，按顺序执行first()、second()

<script>
    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function'){
            window.onload = func;
        }else{
            window.onload = function(){
                oldonload();
                func();
            }
        }
    }
    
    function first(){
        alert("hello");
    }
    function second(){
        alert("world");
    }
    addLoadEvent(first);
    addLoadEvent(second);
　　　　.
　　　　.　　
　　　　.
 </script>

三、为元素element添加class="value"

function addClass(element,value) {
        var newClassName;
        if(!element.className){
            element.className=value;
        }else{
            newClassName=element.className;
            newClassName+="";
            element.className=newClassName;
        }
    }

为tag标签的下一个同级标签添加ctheclass样式

function styleElementSiblings(tag,theclass) {
        if (!document.getElementsByTagName) return false;
        var elems = document.getElementsByTagName(tag);
        var elem;
        for(var i=0;i<elems.length;i++){
            elem = getNextElement(elems[i].nextSibling);
            addClass(elem,theclass);
        }
    }

例

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
    <title>函数</title>
    <style>
        .intro{
            color:pink;
        }
    </style>
</head>
<body>
<h1>Hold the front page</h1>
<p>this first paragraph leads you in</p>
<p>Now you get the</p>
<p>The most important information</p>
<h1>Extra!</h1>
<p>Further developments </p>
<p>You can read all</p>
<script>
    addLoadEvent(function(){
        styleElementSiblings("h1","intro");
    });
    //为tag标签的下一个同级标签添加ctheclass样式
    function styleElementSiblings(tag,theclass) {
        if (!document.getElementsByTagName) return false;
        var elems = document.getElementsByTagName(tag);
        var elem;
        for(var i=0;i<elems.length;i++){
            elem = getNextElement(elems[i].nextSibling);
            addClass(elem,theclass);
        }
    }
    //为元素element添加class="value"
    function addClass(element,value) {
        var newClassName;
        if(!element.className){
            element.className=value;
        }else{
            newClassName=element.className;
            newClassName+="";
            element.className=newClassName;
        }
    }
    function getNextElement(node){
        if(node.nodeType==1){
            return node;
        }
        if(node.nextSibling){
            return getNextElement(node.nextSibling);
        }
        return null;
    }
     function addLoadEvent(func) {
        var oldonload=window.onload;
        if(typeof window.onload!='function'){
            window.onload=func;
         }else{
            window.onload=function () {
            oldonload();
            func();
            }
         }
     }
</script>
</body>
</html>

四、元素移动函数

function moveElement(elementID,final_x,final_y,interval){//(目标ID，目标位置，执行间隔）
            if(!document.getElementById) return false;
            if(!document.getElementById(elementID)) return false;
            var elem=document.getElementById(elementID);
            var xpos=parseInt(elem.style.left);
            var ypos=parseInt(elem.style.top);
            if(xpos==final_x && ypos==final_y){
                return true;
            }
            if(xpos<final_x){
                xpos++;
            }
            if(xpos>final_x){
                xpos--;
            }
            if(ypos<final_y){
                ypos++;                
            }
            if(ypos>final_y){
                ypos--;
            }
            elem.style.left=xpos+"px";
            elem.style.top=ypos+"px";
            var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
            movement=setTimeout(repeat,interval);
        }

封装的函数

推荐阅读