Удаление и повторная вставка элемента DOM по клику

Question

Я недавно написал скрипт, в котором мне нужно было элемент, чтобы переместиться в верхнюю часть, когда на него нажимали. Я использовал и уже много лет использую следующий код в функции onclick:

this.parentNode.appendChild(this.parentNode.removeChild(this));

Скрипт не работал, и поэтому я возился с кодом, пробуя то, чего никогда не делал раньше, пытаясь это исправить. Я думал, что проблема может заключаться в этой строке кода. На самом деле оказалось, что это не имеет никакого отношения к этому, но пока я возился, я заметил, что следующий код выполняет ту же функцию.

this.parentNode.appendChild(this);

Насколько я могу судить, разницы нет. Первый мне кажется «лучше», но я не могу сказать почему. Есть ли реальная разница? Если нет, я начну использовать последний и сохраню восемнадцать символов: -)

Answer 1

this не является потомком this.
Вам необходимо удалить дочерний узел из родительского узла.

Однако appendChild будет неявно удалять узел из любого существующего родителя (элементы не могут иметь нескольких родителей):

Если узел уже существует, он удаляется из текущего родительского узла, а затем добавляется в новый родительский узел.