我正在编写一个Javascript游戏作为练习对象和AJAX。它涉及wessels在航海主题网格周围的移动。虽然wessels是在一个对象的数组中，我需要操纵他们的图形表示，他们的精灵。目前，我从DOM角度选择在'td'元素中使用'img'元素。 从UI连续性的角度来看，推荐使用Javascript以编程方式移动元素的方法：
（a）删除'from'单元格（td元素）的内部html并重写'to'单元格的内部html，
b）克隆img节点（sprite），从其父节点删除原始节点，并将其附加到'to'单元格，或者（c）使用相对于精灵表格元素的定位，忽略td的alltogether尽管他们的背景[颜色]代表了海洋的深度）。移动DOM元素的方法
我一定会坚持将精灵从单元格移动到单元格，而不是使用相对定位到表格。我的推理是，表格单元的大小可能因浏览器而异（因为填充，边距等方式会产生差异 - 特别是在恼人的IE中），并计算精确位置来定位精灵，以便它在内部排列给定的单元格可能会变得复杂。
将其缩小为（a）或（b）以供您选择。这里让我们去掉选项（a），因为从里面删除HTML并不是干净的操作DOM的方式。我喜欢将节点存储在一个对象中，然后将其附加到'to'单元，然后删除原来的节点，这是您的选项（b）建议的。这样，你仍然不需要处理高级别的“对象”而不是低级别的“文本”。你不需要混淆文本 - 对于这样的应用程序，如果你不知道JavaScript已经提供的DOM操作函数，那将是肮脏的“黑客”方法。
我的回答是（b）。然而，如果你绝对需要速度 - 虽然对于你的游戏，我不知道你是否真的需要额外的提升 - 你可能会考虑选项（一）。一些来源，如http://www.quirksmode.org/dom/innerhtml.html争辩说，DOM操作方法通常比使用innerHTML慢。但这是一切的一般规则。你走的级别越低，你的代码就越快。级别越高，代码越容易理解和概念化，并且在我看来，由于速度不会在这种情况下产生巨大的差异，因此保持整洁并符合（b）。
不需要克隆img节点，删除旧节点并追加克隆。只需将img节点附加到接收td。它会自动从以前的td中删除。简单，有效和快速。