«дотронуться» до элемента DOM

Question

Есть ли удобный способ «прикоснуться» к элементу DOM? Я хотел бы удалить элемент и вставить его снова в той же позиции. Примерно так:

element.parentNode.removeChild(element).appendChild(element);

за исключением того, что appendChild вставляет элемент в качестве последнего брата.

Answer 1

Создает фиктивный текстовый узел для использования в качестве маркера и заменяет его на узел. Позже, когда узел должен быть вставлен заново, замените его фиктивным узлом, чтобы сохранить положение.

Node.replaceChild

var dummy = document.createTextNode('');
var parent = element.parentNode;

parent.replaceChild(dummy, element); // replace with empty text node
parent.replaceChild(element, dummy); // swap out empty text node for original

Answer 2

Используйте insertBefore вместо appendChild.

var other = element.nextSibling;

if ( other ) {
  other.parentNode.removeChild(element);
  other.parentNode.insertBefore(element,other);
} else {
  other = element.parentNode;
  other.removeChild(element);
  other.appendChild(element);
}

Answer 3

Да, но было бы лучше использовать DOM cloneNode (true), поскольку он сохранил бы все дочерние узлы и свойства:

// Copy the node.
var theOldChild = document.getElementById("theParent").childNodes[blah]
var theNewChild = theOldChild.cloneNode(true);

// Find the next Sibling
var nextSib = theOldChild.nextSibling();

// Remove the old Node
theOldChild.parentNode.removeChild(theOldChild)

// Append where it was.
nextSib.parentNode.inserertBefore(theNewChild, nextSib);

Я бы сделал это так, как вы можете удержать переменную "theNewChild" на 100% и вставить ее обратно в документ в любое время.