交換HTML元素，但保留原始ID - JS

Question

即時通訊嘗試交換2個HTML元素，但他們需要保留其原始ID。
我得到一個表格，每個單元格的ID =「ixjcell」，每個單元格都有一個帶有匹配的id「ixj」（沒有「單元格」部分）的子div。
我的想法是：首先交換元素，然後交換ID ...聽起來很簡單，但由於某種原因無法讓它工作。 我使用的下一個代碼（這是我從here得到）2個元素

function swapElementsObj(obj1, obj2) { 
    // create marker element and insert it where obj1 is 
    var temp = document.createElement("div"); 

    obj1.parentNode.insertBefore(temp, obj1); 
    // move obj1 to right before obj2 
    obj2.parentNode.insertBefore(obj1, obj2); 

    // move obj2 to right before where obj1 used to be 
    temp.parentNode.insertBefore(obj2, temp); 

    // remove temporary marker node 
    temp.parentNode.removeChild(temp); 

    var obj1ID = obj1.getAttribute('id'); 
    var obj2ID = obj2.getAttribute('id'); 
    var obj1Childid = obj1ID.replace('cell', ''); 
    var obj2Childid = obj2ID.replace('cell', ''); 
    var obj1Child = document.getElementById(obj1Childid); 
    var obj2Child = document.getElementById(obj2Childid); 

    document.getElementById(obj2Childid).setAttribute('id', obj1Childid); 
    document.getElementById(obj1Childid).setAttribute('id', obj2Childid); 


    obj1.setAttribute('id', obj2.getAttribute('id')); 
    obj2.setAttribute('id', obj1ID); 
} 

其棋盤遊戲之間進行切換，我需要旋轉板中的一個，從而使用轉置+ IM反向列/行和它的工作...種類，問題是ID混合起來，然後旋轉不正常。
元素做換！，我看到棋盤上的棋子交換正確，但是有些東西正在交換ID的背後，我不能正確地做對。
不能使用JQuery。 在此先感謝！

元素看起來像這樣：

<td> 
<span class="boardSingleSpot" id="1x1cell"> 
<div id="1x1" class="dropArea" draggable="false" ondragenter="drag_enter(event);" ondrop="drag_drop(event);" ondragover="return false" ondragleave="drag_leave(event);" data-droppable="true"> 
</div> 
</span> 
</td> 

這是小例子：

編輯：（詳細信息）：
我有一個板，其我拖動棋子（黑色/白色），並放置 - 當掉落時，pawn作爲子類添加到class = droparea的div中。
然後我必須旋轉，當我旋轉我必須將典當移動到他的適當位置，在典型上面的示例是方形1x1和順時針旋轉後它將在1x2，所以我需要交換內容單元格1x1和單元格1x2。

HTML想要的結果：從這個
：

<td> 
<span class="boardSingleSpot" id="1x1cell"> 
<div id="1x1" class="dropArea" draggable="false" ondragenter="drag_enter(event);" ondrop="drag_drop(event);" ondragover="return false" ondragleave="drag_leave(event);" data-droppable="true"> 
<div id="player1" draggable="true" ondragstart="drag_start(event);" ondragend="drag_end(event);" data-droppable="false"> 
</div> 
</span> 
</td> 

<td> 
<span class="boardSingleSpot" id="1x2cell"> 
<div id="1x2" class="dropArea" draggable="false" ondragenter="drag_enter(event);" ondrop="drag_drop(event);" ondragover="return false" ondragleave="drag_leave(event);" data-droppable="true"> 
</div> 
</span> 
</td> 

這樣：

<td> 
<span class="boardSingleSpot" id="1x1cell"> 
<div id="1x1" class="dropArea" draggable="false" ondragenter="drag_enter(event);" ondrop="drag_drop(event);" ondragover="return false" ondragleave="drag_leave(event);" data-droppable="true"> 
</div> 
</span> 
</td> 

<td> 
<span class="boardSingleSpot" id="1x2cell"> 
<div id="1x2" class="dropArea" draggable="false" ondragenter="drag_enter(event);" ondrop="drag_drop(event);" ondragover="return false" ondragleave="drag_leave(event);" data-droppable="true"> 
<div id="player1" draggable="true" ondragstart="drag_start(event);" ondragend="drag_end(event);" data-droppable="false"> 
</div> 
</span> 
</td> 

Answer 1

更換

document.getElementById(obj2Childid).setAttribute('id', obj1Childid); 
document.getElementById(obj1Childid).setAttribute('id', obj2Childid); 

與

obj2Child.setAttribute('id', obj1Childid); 
obj1Child.setAttribute('id', obj2Childid);