我正在編寫一個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中刪除。簡單，有效和快速。