obtener - que es el dom en javascript




Insertar un elemento div como padre (3)

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

Pero para complicar las cosas, en otros lugares ya hemos hecho cosas como:

var testElement = document.getElementByID('testID')

donde testID es un elemento secundario del elemento a ser warapped en un div. ¿Así que después de que hayamos hecho nuestra inserción, el elemento de prueba seguirá siendo válido?

Por cierto: no estoy usando jquery.

¿Algunas ideas?

Gracias,

AJ


Aquí hay otro ejemplo, solo el nuevo elemento envuelve alrededor de "todos" 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 espero que sea 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));
}

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


En JS puro puedes probar algo como esto ...

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

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

Mover elementos no rompe las referencias directas a ellos.

(Si estuviera usando innerHTML, estaría destruyendo el contenido del elemento en el que estaba configurando esa propiedad y luego creando nuevo contenido)

Probablemente quieras algo como:

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




dom