删除后是否可以将孩子附加到表中 - Javascript答案

【问题标题】：Is it possible to append a child back to a table after its removal - Javascript删除后是否可以将孩子附加到表中 - Javascript
【发布时间】：2014-04-18 18:02:55
【问题描述】：

是否可以将子元素附加到表中 <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);
}

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

任何帮助表示赞赏。

【问题讨论】：

如果在再次追加之前删除另一行会怎样？

标签： javascript html dom

【解决方案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);
}

【讨论】：

【解决方案2】：

append 根据定义附加到集合的末尾。要插入到不同的位置，您需要保留要插入的元素，然后是用户insertAfter。看到这个问题：Javascript Append Child AFTER Element

另外，如果你做更多这样的事情，你可能想考虑看看jQuery

【讨论】：