[代码解析] 关于交换两个DOM节点在文档中的位置

Question

交换两个DOM节点在文档中的位置,下面的代码中分了两种情况：

(1)a b是同级元素

(2)a嵌套b（或者b嵌套a）

html：

<div><span id="a1">a</span><span id="b1">b</span></div>

<div><span id="a2">a</span><span></span><span id="b2">b</span></div>

<div><span id="a3">a<span id="b3">b</span></span></div>

js:

function swapElements(a,b){

  if(a==b)return;

  //记录父元素

  var bp=b.parentNode,ap=a.parentNode;

  //记录下一个同级元素

  var an=a.nextElementSibling,bn=b.nextElementSibling;

  //如果参照物是邻近元素则直接调整位置

  if(an==b)return bp.insertBefore(b,a);

  if(bn==a)return ap.insertBefore(a,b);

  if(a.contains(b)) //如果a包含了b

    return ap.insertBefore(b,a),bp.insertBefore(a,bn);

  else

    return bp.insertBefore(a,b),ap.insertBefore(b,an);

};

swapElements(a1,b1);

swapElements(a2,b2);

swapElements(a3,b3);

问题是，

(1)为什么同级情况中

bp.insertBefore(b,a);要return 回去

(2)嵌套情况中,下列代码看不懂

return ap.insertBefore(b,a),bp.insertBefore(a,bn);