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

如何交换两个嵌套的元素

作者: 元气满满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();

相关文章

  • 如何交换两个嵌套的元素

    交换两个DOM节点在文档中的位置,下面的代码中分了两种情况:(1)a b是同级元素(2)a嵌套b(或者b嵌套a) ...

  • 嵌套规则

    块元素能嵌套所有元素p不能嵌套块,只能嵌套行内行内元素不能嵌套块元素行内可以嵌套行内,但是不能嵌套自己a可以嵌套任...

  • 冒泡排序

    思想 从第一个元素开始比较相邻两个元素的大小,如果后面的元素小,则交换两个元素的位置,直到所有相邻的元素都交换完成...

  • 冒泡排序的核心部分是双重嵌套循环

    冒泡排序的核心部分是双重嵌套循环 冒泡排序的基本思想是:每次比较两个相邻的元素,如果它们的顺序错误就把它们交换 过来。

  • HTML5与HTML4的元素嵌套规则

    HTML4的元素嵌套规则 在我们的印象中会有这样的嵌套规则: 内联元素不能嵌套块元素 元素和 元素不能嵌套块元素 ...

  • 排序算法

    冒泡排序(Bubble Sort) 从左往右对比相邻的两个元素,如果左边的元素更大就交换,越大的元素会经由交换慢慢...

  • 内联元素和块级元素之间的嵌套关系

    首先,我们来回顾一下内联元素和块级元素内联元素可以嵌套内联元素,块级元素可以嵌套部分块级元素并也能嵌套内联元素,但...

  • (C++实现)经典排序算法

    1. 交换排序 根据数组中两个元素值的大小来交换两个元素在数组中的位置。 1.1 冒泡排序 1.1.1 基本思想:...

  • 在CSS样式中有关 float 浮动嵌套 问题

    浮动元素可以相互嵌套,嵌套规律与流动元素的嵌套相同。浮动的包含元素(父元素)总会自动调整自身的高度和宽度以实现对浮...

  • 【PHP】简单排序算法

    冒泡排序 遍历列表,比较两个相邻元素的大小,不符合排序就交换相邻元素的位置,直到遍历结束或没有可交换的元素,则排序...

网友评论

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

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