Вставить элемент div в качестве родительского

Мне просто интересно, возможно ли следующее: скажем, у нас есть элемент dom, и мы хотим обернуть этот элемент в div. Таким образом, div устанавливается между элементом и его родителем. Затем div становится элементом нового родителя.

Но чтобы усложнить ситуацию, в других местах мы уже делали такие вещи, как:

var testElement = document.getElementByID('testID')

где testID является дочерним элементом элемента, который должен быть заменен в div. Итак, после того, как мы сделали это, testElement по-прежнему будет действительным?

Кстати: я не использую jquery.

Любые идеи?

Спасибо,

AJ

ОТВЕТЫ

Ответ 1

Вы можете использовать replaceChild [docs]:

// `element` is the element you want to wrap
var parent = element.parentNode;
var wrapper = document.createElement('div');

// set the wrapper as child (instead of the element)
parent.replaceChild(wrapper, element);
// set element as child of wrapper
wrapper.appendChild(element);

Пока вы не используете innerHTML (который уничтожает и создает элементы), ссылки на существующие элементы DOM не изменяются.

Ответ 2

Вот еще один пример: только новый элемент обертывает "все" его дочерних элементов.

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

var newChildNodes = document.body.childNodes;  
var newElement = document.createElement('div');

newElement.className = 'green_gradient';
newElement.id = 'content';        

for (var i = 0; i < newChildNodes.length;i++) {
    newElement.appendChild(newChildNodes.item(i));
    newChildNodes.item(0).parentNode.insertBefore(newElement, newChildNodes.item(i));
}

Вам нужно изменить часть документа document.body переменной newChildNodes, чтобы быть родителем вашего нового элемента. В этом примере я решил вставить оболочку div. Вы также захотите обновить тип элемента, а также значения id и className.

Ответ 3

Предполагая, что вы делаете свои манипуляции с использованием стандартных методов DOM (а не innerHTML), тогда - да.

Перемещение элементов вокруг не нарушает прямых ссылок на них.

(Если вы использовали innerHTML, вы бы уничтожили содержимое элемента, на котором вы устанавливали это свойство, а затем создавали новый контент)

Вероятно, вы хотите что-то вроде:

var oldParent = document.getElementById('foo');
var oldChild = document.getElementById('bar');
var wrapper = document.createElement('div');
oldParent.appendChild(wrapper);
wrapper.appendChild(oldChild);

Ответ 4

В чистом JS вы можете попробовать что-то вроде этого...

var wrapper = document.createElement('div'); 
var myDiv = document.getElementById('myDiv'); 
wrapper.appendChild(myDiv.cloneNode(true)); 
myDiv.parentNode.replaceChild(wrapper, myDiv);