javascript - 是否可以在删除子项后将其追加回表中 - Javascript

Question

是否可以将子项附加回<td>内的位置表中的元素。我有 4 个篮球，当其中一个在大约 800 毫秒后被拖到网上时，我想将其恢复到原来的位置。我可以删除子节点(选定的篮球)，并在一段时间后将其返回到表中。

HTML 代码:

<td id="tdId1" style="width:60px;"><div id="bball1" onclick="ballSelection(this.id)"></div></td>    
<td id="tdId2" style="width:60px;"><div id="bball2" onclick="ballSelection(this.id)"></div></td>
<td id="tdId3" style="width:60px;"><div id="bball3" onclick="ballSelection(this.id)"></div></td>
<td id="tdId4" style="width:60px;"><div id="bball4" onclick="ballSelection(this.id)"></div></td>

问题是，当我删除它然后追加它时，它会追加到行 <tr> 的末尾。元素而不是 <td> 。它总是附加到最后一个位置。

可以追加到原来的位置吗？例如排第二？

JavaScript 代码:

var node = document.getElementById(this.Id);
if (node.parentNode) {
    node.parentNode.removeChild(node);
    var node2 = document.getElementById("tdId2");
    setTimeout(function() {node2.parentNode.appendChild(node); }, 800);
}

我尝试附加到第二个作为起点。

感谢任何帮助。

Answer 1

您使用了错误的父级来附加。您选择其中一个 TD，然后访问该 TD 的父级(即 TR)，然后将其附加到该 TD 上。只需在删除之前保存对父级的引用，然后附加到该引用

var node = document.getElementById(this.Id);
if (node.parentNode) {
   var parent = node.parentNode;
   parent.removeChild(node);
   setTimeout(function() {parent.appendChild(node); }, 800);
}