你不知道的addLoadEvent()和inserAfter()函数，因为这两个函数js并没有内置，但是在我们编写页面的时候复用度还是挺高的。因此，我在这里继续理理思路，敲一遍。

首先addLoadEvent()，顾名思义，页面加载的事件监听函数，有个想象的addEventLstener()，是DOM事件监听函数，因为不标准，所以对应的在IE中就有attactEvent()了，addLoadEvent()的复用可以解决window.onload每次只能绑定一个函数的弊端了，当然，你也可以给window.onload的匿名函数里面调用多个函数，如：

1
2
3
4
5
window.onload = function(){
  fn1();
  fn2()
  fn...	
}

但是这样的代码可读性变差了，而且不利于样式与表现的分离，我们可以封装一个函数，基本思路是这样的：首先获取window.onload对象，判断其类型是否是function类型，如果是则说明已经绑定了函数，直接在后面追加函数调用，否则直接调用函数。

1
2
3
4
5
6
7
8
9
10
11
function addLoadEvent(fn){
  var par = window.onload;
  if(typeof window.onload != "function"){
    window.onload = fn;
  }else{
    window.onload = function(){
      par();
      fn();
    }
  }
}

注意的是，当函数赋给window.onload时不需要()，因为这是调用函数，我们需要的是吧函数整体赋给它。

接下来学习insertAfter(),其实并没有这个函数，因为有一个我们熟悉的insertBefore()，然而我们完全可以利用js给我们提供的DOM操作的方法来手写一个insertAfter()，基本思路是这样的：首先获取父级节点，判断父级节点的最后一个节点是否为目标节点，如果是直接在父级节点里面追加新的节点，恰好在最后面，否则在目标节点的下一个节点前面插入节点。

1
2
3
4
5
6
7
8
function insertAfter(newNode,targetNode){
  var  parNode = targetNode.parentNode;
  if(parNode.lastChild == targetNode){
    parNode.appendChild(newNode);
  }else{
    parNode.insertBefore(newNode,targetNode.nextSibling);
  }
}

此函数涉及DOM节点操作.parentNode父级节点、.lastChild最后一个子节点、.nextSibling下一个兄弟节点、.appendChild()追加子节点、.insertBefore()节点前插入节点

多层嵌套：多层嵌套