同樣是前幾天阿里電話(huà)面的一道簡(jiǎn)單的DOM操作題耙旦，
但是由于自己DOM操作掌握的不熟練壕翩，答的很爛.....這里總結(jié)一下
首先這里用到了一個(gè)API,Node.insertBefore(a,b)在b節(jié)點(diǎn)之前插入a
在這之前首先要獲取這兩個(gè)元素的父親節(jié)點(diǎn)
<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>
假設(shè)要交換第一個(gè)和第五個(gè)元素
首先邏輯是先新建一個(gè)節(jié)點(diǎn)（標(biāo)記節(jié)點(diǎn)）埂淮，然后把這個(gè)節(jié)點(diǎn)插在第二個(gè)目標(biāo)節(jié)點(diǎn)前面寄雀，相當(dāng)于記下一個(gè)位置炒俱，然后把第二個(gè)目標(biāo)節(jié)點(diǎn)插到第一個(gè)目標(biāo)節(jié)點(diǎn)前面，再把第一個(gè)目標(biāo)節(jié)點(diǎn)插在標(biāo)記節(jié)點(diǎn)的后面赡盘，結(jié)束。
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
