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

我试图交换2个HTML元素，但它们需要保留其原始ID。
我得到了一个表，每个单元格都有ID=“ixjcell”，每个单元格都有一个子div，其ID匹配为“ixj”（没有“cell”部分）
我的想法是：首先交换元素，然后交换回ID。。。听起来很简单，但由于某些原因，它无法正常工作。 我使用下一个代码（我从中获得）在两个元素之间交换

功能交换组件OBJ（obj1、obj2）{
//创建标记元素并将其插入obj1所在的位置
var temp=document.createElement（“div”）；
obj1.parentNode.insertBefore（临时，obj1）；
//将obj1移到obj2之前的右侧
obj2.parentNode.insertBefore（obj1，obj2）；
//将obj2移到obj1原来所在位置之前的右侧
temp.parentNode.insertBefore（obj2，temp）；
//删除临时标记节点
临时parentNode.removeChild（临时）；
var obj1ID=obj1.getAttribute（'id'）；
var obj2ID=obj2.getAttribute（'id'）；
变量obj1Childid=obj1ID.replace（'单元格'，''）；
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混淆了，然后旋转不正常。
元素进行交换我看到棋盘上的棋子正确地交换了，但交换ID的背面时出现了一些问题，我无法正确地进行交换。
不能使用JQuery。 提前谢谢

元素如下所示：

这是一个小例子：

编辑：（更多信息）：
我有一块板，我将棋子（黑色/白色）拖到上面并放下-放下时，棋子作为子对象附加到div中，class=droparea。
然后我必须旋转，当我旋转时，我必须将兵移动到适当的位置，在上面的示例中，兵位于正方形1x1上，顺时针旋转后它将位于1x2上，因此我需要交换单元格1x1和单元格1x2的内容

HTML想要的结果：
由此：

为此：

更换

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

与

---

为什么不交换内容？请看@jantimon，交换内容是什么意思？我仍然需要使用我创建的ID访问表，我在单元格上删除其他元素并作为子元素追加，是否有办法在两个元素之间单独移动子元素？如果每个单元格都有该ID，那么您基本上误用了ID属性。你应该改为使用类。你需要回到绘图板。有比大规模操纵DOM更简单的方法来完成您想要做的事情。使用桌子听起来是个坏主意。我建议改为使用64个绝对定位元素。然后你可以通过改变它们的顶部和左侧属性来交换它们。就我所见，这就完成了任务。谢谢你的帮助。我还认为可能会交换跨度的子元素，有可能也会得到同样的结果吗？

<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>

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

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