Cuando ejecuto el siguiente código en el navegador:
const frag = new DocumentFragment(); const ul = document.createElement('ul'); frag.appendChild(ul); Object.entries(['a', 'b', 'c']).forEach(([key, value]) => { const li = document.createElement('li'); li.textContent = value; ul.appendChild(li); console.log(key, frag.firstChild); });Se registran 3 listas desordenadas, cada una con 3 elementos de elementos de lista:
0 <ul> <li>a</li> <li>b</li> <li>c</li> </ul> 1 <ul> <li>a</li> <li>b</li> <li>c</li> </ul> 2 <ul> <li>a</li> <li>b</li> <li>c</li> </ul>¿Cómo puedo registrar la progresión a medida que se agregan elementos a la lista? Por ejemplo -
0 <ul> <li>a</li> </ul> 1 <ul> <li>a</li> <li>b</li> </ul> 2 <ul> <li>a</li> <li>b</li> <li>c</li> </ul>Puede hacer esto registrando el contenido HTML del elemento ul , no su referencia, para esto puede usar outerHTML :
const frag = new DocumentFragment(); const ul = document.createElement('ul'); frag.appendChild(ul); Object.entries(['a', 'b', 'c']).forEach(([key, value]) => { const li = document.createElement('li'); li.textContent = value; ul.appendChild(li); console.log(key, frag.firstChild.outerHTML); });