Inserte un elemento div como primario

Question

Me pregunto si lo siguiente es posible, digamos que tenemos un elemento dom y queremos envolver este elemento en un div. Entonces se inserta un div entre el elemento y su padre. Entonces el div se convierte en el nuevo padre del elemento.

Sin embargo, para complicar las cosas, en otros lugares que ya hemos hecho cosas como:

var testElement = document.getElementByID('testID') 

donde testid es un hijo del elemento a ser warapped en un div. Entonces, después de que hayamos hecho nuestra inserción, testElement seguirá siendo válido?

BTW: No estoy usando jquery.

¿Alguna idea?

Gracias,

AJ

Answer 1

puede utilizar 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); 

mientras usted no está utilizando innerHTML (que destruye y crea elementos), refe las referencias a los elementos DOM existentes no se modifican.

Answer 2

Suponiendo que está haciendo su manipulación utilizando métodos estándar DOM (y no innerHTML), entonces - sí.

Los elementos en movimiento no contienen referencias directas a ellos.

(Si se utiliza innerHTML, entonces sería destruir el contenido del elemento que se estaban estableciendo que la propiedad y luego la creación de nuevos contenidos)

es probable que desee algo como:

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

Answer 3

En JS puro que puede intentar algo como esto ...

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

Answer 4

Aquí hay otro ejemplo, sólo el nuevo elemento se envuelve alrededor de 'todo' de sus elementos secundarios.

Puede cambiar esto según sea necesario para que se ajuste a diferentes rangos. No hay muchos comentarios sobre este tema específico, ¡así que con suerte será de ayuda para todos!

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)); 
} 

Usted tendrá que modificar la parte 'document.body' de la variable newChildNodes ser cualquiera que sea el padre de su nuevo elemento será. En este ejemplo, elegí insertar un envoltorio div. También querrá actualizar el tipo de elemento y los valores id y className.