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

Question

我试图交换2个HTML元素，但他们需要保留原始ID 我有一个表，每个单元格都有ID =“ixjcell”，每个单元格都有一个匹配id为“ixj”的子div（没有“cell”部分）;
我的想法是：首先交换元素，然后交换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);
}

它是一个棋盘游戏，我需要旋转其中一个板，所以我使用转置+反向列/行和它的工作...有点，问题是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>

这是一个小例子：

编辑:(更多信息）：
我有一个板子，我把棋子（黑色/白色）拖到它上面然后掉落 - 棋子，下拉后作为孩子附加到div = class = droparea。 然后我必须旋转，当我旋转时我必须将棋子移动到他正确的位置，在上面的示例中，棋子在方形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);