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

Question

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

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

var testElement = document.getElementByID('testID')

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

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

Есть идеи?

Спасибо

AJ

Answer 1

Вы можете использовать replaceChild ^{[документы]} :

// `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 не изменены.

Answer 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, чтобыкаким бы ни был родитель вашего нового элемента.В этом примере я выбрал вставку оболочки.Вам также потребуется обновить тип элемента, а также значения id и className.

Answer 3

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

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

Answer 4

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

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

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

Возможно, вы захотите что-то вроде:

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