Sé cómo crear un nuevo div o cualquier otro elemento HTML y agregarlo como un niño usando JavaScript puro.
¿Puedo crear un nuevo elemento y agregarle el existente?
Por ejemplo:
Me gustaría tomar el código actual a continuación y ponerlo dentro de un nuevo div.
// Current elements on page <div> <img /> <img /> </div> <div> <p>Hello world</p> </div>Lo que quiero:
// What I want <div class="my-new-div"> <div> <img /> <img /> </div> <div> <p>Hello world</p> </div> </div>Sin embargo, entiendo que esto es fácil de hacer en HTML. Tengo que usar JavaScript en este escenario para modificar una página web. En este escenario, debo agregar un div principal para evitar cambiar los estilos.
Simplemente puede obtener el nodo existente, crear uno nuevo, insertarlo antes del nodo existente y finalmente agregar el nodo existente al nuevo nodo como hijo. El navegador mueve el nodo al realizar la operación de "añadir", si ya está contenido en alguna parte del documento.
const myDiv = document.getElementById("myDiv"); const myNewDiv = document.createElement("div"); myNewDiv.style.border = "solid 1px"; document.body.insertBefore(myNewDiv, myDiv); myNewDiv.appendChild(myDiv); <div id="myDiv"> <p>Hello</p> <p>Paragraph</p> </div>Para mover un elemento de una parte del documento a otra parte, debe asociar el elemento a un nuevo padre. esto desasocia automáticamente el elemento en movimiento de su padre anterior.
function newAndMove() { //Create a new element let blue = document.createElement('DIV'); blue.classList.add('blue-div'); document.body.appendChild(blue); //Move existing element inside it let red = document.getElementById('old-div'); blue.appendChild(red); } .red-div { width: 200px; height: 200px; background-color: red; } .blue-div { width: 400px; height: 400px; background-color: blue; position: absolute; top: 100px; left: 100pxl } <input type="button" value="Get red inside new blue" onClick="newAndMove()"> <div class="red-div" id="old-div"></div>puede mover elementos DOM agregándolos como elementos secundarios al contenedor preferido.