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，然后访问TR的父级，然后附加到该TD。只需在删除之前保存对父级的引用，然后附加到该引用

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

Answer 2

根据定义，

append附加到集合的末尾。要插入到其他位置，您需要保留要插入的元素，然后是用户insertAfter。请参阅此问题：Javascript Append Child AFTER Element

另外，如果你做了更多这方面的工作，你可能要考虑查看jQuery

是否有可能在删除后将子项追加到表中 - Javascript

2 个答案: