交换两个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(){
  let a = document.getElementById("a1");
  let b = document.getElementById("b1");
  /*let a = document.getElementById("a2");
  let b = document.getElementById("b2");*/
  /*let a = document.getElementById("a3");
  let b = document.getElementById("b3");*/
  //记录父元素
  const bp=b.parentNode,ap=a.parentNode;
  //记录下一个同级元素
  const an=a.nextElementSibling,bn=b.nextElementSibling;
  if(a.contains(b)){
     ap.insertBefore(b,a);
     b.appendChild(a);
  }else if(an==b){
    ap.insertBefore(b,a);
  }else{
    if(bn==a){
      bp.insertBefore(a,b);
    }
  }
}
swapElements();











网友评论