交换两个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();
网友评论