JS互换两元素的位置

2019-04-18  本文已影响0人  不爱举铁的伪文青不是好前端

同样是前几天阿里电话面的一道简单的DOM操作题,
但是由于自己DOM操作掌握的不熟练,答的很烂.....这里总结一下
首先这里用到了一个API,Node.insertBefore(a,b)在b节点之前插入a
在这之前首先要获取这两个元素的父亲节点

<div>
      <div id="list1">list1</div>
      <div id="list2">list2</div>
      <div id="list5">list5</div>
      <div id="list6">list6</div>
</div>

<style>
      #list1{
        background:red;
      }
      #list2{
        background:orange;
      }
      #list5{
        background:green;
      }
     #list6{
        background:pink;
      }
</style>

假设要交换第一个和第五个元素
首先逻辑是先新建一个节点(标记节点),然后把这个节点插在第二个目标节点前面,相当于记下一个位置,然后把第二个目标节点插到第一个目标节点前面,再把第一个目标节点插在标记节点的后面,结束。

JS代码:

function exchange(id_1,id_2){
  var newNode = document.createElement('div')
  list1.parentNode.insertBefore(newNode,id_2)
  list1.parentNode.insertBefore(id_2,id_1)
  list1.parentNode.insertBefore(id_1,newNode)
  list1.parentNode.removeChild(newNode)
}
exchange(list2,list6)
list2.png
上一篇下一篇

猜你喜欢

热点阅读