Necesito envolver el elemento child en wrap-of-parent. Antes de envolver, agregue algunos atributos a los elementos principal y secundario. En el código que se describe a continuación, todo funciona bien si los elementos secundarios están uno debajo del otro en una fila separada, y si están en una fila, todos los demás elementos secundarios se insertan en el wrap-of-parent. ¿Por qué sucede esto y cómo solucionarlo?
Yo obtengo:
<div id="container"> <div id="parent1"> <div id="child1"></div> <div id="child2"></div> <div id="wrap-of-parent1"> <div id="child3"></div> <div id="child4"></div> </div> </div>Necesito conseguir:
<div id="container"> <div id="parent1"> <div id="wrap-of-parent1"> <div id="child1"></div> <div id="child2"></div> <div id="child3"></div> <div id="child4"></div> </div> </div>Código:
var container = document.getElementById("container"); const parentDivs = container.querySelectorAll(":scope *"); //if child elements also have child elements, to wrap in for (let parent of parentDivs) { // create a new div let wrap = document.createElement('div'); wrap.id = 'wrap-of-' + parent.id; // move the parent's children to it let children = parent.childNodes; for (let i = 0; i < children.length; i++) { if (children[i].nodeType === Node.ELEMENT_NODE) { children[i].setAttribute("data", "somedata"); wrap.append(children[i]); }} // and append it to the parent parent.appendChild(wrap); } <div id="container"> <div id="parent1"> <div id="child1"></div><div id="child2"></div><div id="child3"></div><div id="child4"></div> </div> </div> <! - If the child elements are one below the other in a separate row it works, if they are in one row it does not work ->Si sigue moviendo la primera entrada (índice 0), funcionará. Debe agregar un desplazamiento cuando se encuentre el tipo de nodo incorrecto para omitirlos, y si no hay nodos secundarios, no procese el nodo:
var container = document.getElementById("container"); const parentDivs = container.querySelectorAll(":scope *"); //if child elements also have child elements, to wrap in for (let parent of parentDivs) { // create a new div if (parent.childNodes.length > 0) { let wrap = document.createElement('div'); wrap.id = 'wrap-of-' + parent.id; // move the parent's children to it let children = parent.childNodes; const nChildren = children.length; let offset = 0; for (let i = 0; i < nChildren; i++) { if (children[offset].nodeType === Node.ELEMENT_NODE) { children[offset].setAttribute("data", "somedata"); wrap.append(children[offset]); } else { offset++; } } // and append it to the parent parent.appendChild(wrap); } } <div id="container"> <div id="parent1"> <div id="child1"></div><div id="child2"></div><div id="child3"></div><div id="child4"></div> </div> </div>