Estoy tratando de usar DocumentFragment como un punto de inserción de otros elementos, algo como esto:
const parent = document.createElement('div'); const container = document.createDocumentFragment(); parent.appendChild(container); // the following code should produce <div><p></p></div> const child = document.createElement('p'); container.appendChild(child); // when the following code execute it should produce <div></div> container.removeChild(child); El principal problema es que no funciona. Cualquier elemento insertado en el container después de que se insertó en el elemento parent no se procesa en el elemento parent . Mi objetivo es que quiero que el container actúe como un padre transparente para sus hijos, por lo que el selector de CSS verá a sus hijos como hijos de parent .
No es así como funciona appendChild con documentFragment. El uso de appendChild de un fragmento de documento agrega los elementos secundarios de los fragmentos, no el fragmento en sí.
Ver Norma Dom - 4.2.3. Algoritmos de mutación: "Para insertar un nodo en un padre...
Parece que no puedes lograr esto usando DocumentFragment . Ver Mozilla MDN :
Un uso común para
DocumentFragmentes crear uno, ensamblar un subárbol DOM dentro de él, luego agregar o insertar el fragmento en el DOM […] Hacer esto mueve los nodos del fragmento al DOM, dejando un DocumentFragment vacío .
Puede verificar este comportamiento usando la consola:
> const container = document.createDocumentFragment(); > container.appendChild(document.createElement('span')); > container // contains the span element ▼ #document-fragment <span></span> > const parent = document.createElement('div'); > parent.appendChild(container); > parent ▼ <div> <span></span> </div> > container // is now empty #document-fragment