Мне просто интересно, возможно ли следующее: скажем, у нас есть элемент dom, и мы хотим обернуть этот элемент в div. Таким образом, div устанавливается между элементом и его родителем. Затем div становится элементом нового родителя.
Но чтобы усложнить ситуацию, в других местах мы уже делали такие вещи, как:
var testElement = document.getElementByID('testID')
где testID является дочерним элементом элемента, который должен быть заменен в div. Итак, после того, как мы сделали это, testElement по-прежнему будет действительным?
Кстати: я не использую jquery.
Любые идеи?
Спасибо,
AJ
Вы можете использовать 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 не изменяются.
Вот еще один пример: только новый элемент обертывает "все" его дочерних элементов.
Вы можете изменить это, если необходимо, чтобы он обернулся в разных диапазонах. Существует не так много комментариев по этой конкретной теме, поэтому, надеюсь, это поможет всем!
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.
Предполагая, что вы делаете свои манипуляции с использованием стандартных методов DOM (а не innerHTML), тогда - да.
Перемещение элементов вокруг не нарушает прямых ссылок на них.
(Если вы использовали innerHTML, вы бы уничтожили содержимое элемента, на котором вы устанавливали это свойство, а затем создавали новый контент)
Вероятно, вы хотите что-то вроде:
var oldParent = document.getElementById('foo');
var oldChild = document.getElementById('bar');
var wrapper = document.createElement('div');
oldParent.appendChild(wrapper);
wrapper.appendChild(oldChild);
В чистом JS вы можете попробовать что-то вроде этого...
var wrapper = document.createElement('div');
var myDiv = document.getElementById('myDiv');
wrapper.appendChild(myDiv.cloneNode(true));
myDiv.parentNode.replaceChild(wrapper, myDiv);