Методы для перемещения элемента DOM

Question

Я программирую игру на Javascript как упражнение на объектах и ​​AJAX. Это включает в себя движение судов вокруг сетки на морскую тему. Хотя сосуды находятся в массиве объектов, мне нужно манипулировать их графическим представлением, их спрайтами. На данный момент я решил, с точки зрения DOM, использовать элементы img внутри элементов td. С точки зрения непрерывности пользовательского интерфейса, какой метод программного перемещения элементов с помощью Javascript был бы рекомендован:
(a) удаление внутреннего html ячейки «from» (элемент td) и перезапись внутреннего html ячейки «to»,
(б) клонировать узел img (спрайт), удалить исходный узел из его родителя и добавить его в ячейку «to», или
(c) использование позиционирования относительно элемента таблицы для спрайта, полное игнорирование тд (хотя их фон [цвет] представляет глубину океана).

Answer 1

Нет необходимости клонировать узел img, удалить старый и добавить клон.Просто добавьте узел img к получающему td.Он будет автоматически удален с того места, где он был ранее. Простой, эффективный и быстрый.

Answer 2

Я бы определенно придерживался перемещения спрайта от ячейки к ячейке, а не относительного позиционирования к таблице. Я полагаю, что размер ячейки таблицы может варьироваться от браузера к браузеру (учитывая различия в способе отображения отступов, полей и т. Д., Особенно при использовании раздражающего IE) и вычислять точное местоположение для размещения спрайта, чтобы он выстраивался в пределах данная клетка может усложниться.

Это сужает его до (а) или (б) для ваших вариантов. Здесь давайте исключим опцию (а), так как удаление HTML изнутри не является чистым способом манипулирования DOM. Мне нравится идея сохранить узел в объекте, а затем добавить его в ячейку «to», а затем удалить исходный узел, что предлагает ваш вариант (b). Таким образом, вы по-прежнему имеете дело с высокоуровневыми «объектами», а не с низкоуровневым «текстом» без необходимости. Вам не нужно возиться с текстом - для такого приложения это был бы грязный «хакерский» способ сделать это, если вы не знали о функциях манипулирования DOM, которые JavaScript уже предлагает.

Мой ответ (б). Однако, если вам абсолютно необходима скорость - хотя для вашей игры я не знаю, действительно ли вам понадобится дополнительный импульс - вы можете рассмотреть вариант (а). Несколько источников, таких как http://www.quirksmode.org/dom/innerhtml.html, утверждают, что методы манипулирования DOM обычно медленнее, чем использование innerHTML. Но это общее правило со всем. Чем ниже уровень, тем быстрее вы можете сделать свой код. Чем выше уровень, тем проще для понимания и концептуализации код, и, на мой взгляд, скорость не будет иметь большого значения в этом случае, будьте аккуратны и придерживайтесь (b).