美文网首页让前端飞
如何交换两个嵌套的元素

如何交换两个嵌套的元素

作者: 元气满满321 | 来源:发表于2017-07-27 15:44 被阅读60次

    交换两个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();
    
    

    相关文章

      网友评论

        本文标题: 如何交换两个嵌套的元素

        本文链接:https://www.haomeiwen.com/subject/bpizkxtx.html