Tengo una lista como esta:
<ul id='list'> <li>First</li> <li>Second</li> <li>Third</li> </ul>Quiero poder restaurar esa lista después de alguna manipulación en el futuro, así que guardo eso:
let ul_list = document.getElementById('list'); let items = document.getElementsByTagName('li'); let li_items = []; for (var i = 0 ; i < items.length; i++) { let li = document.createElement('li'); let text = document.createTextNode(items[i].innerHTML); li_items.push(li.appendChild(text)); }y creo función para restaurar:
function restoreList(){ while (ul_list.firstChild) { ul_list.removeChild(ul_list.firstChild) }; for (var i = 0 ; i < li_items.length; i++) { ul_list.appendChild(li_items[i]) }; }Pero al usar esta función no obtengo una lista marcada, solo tres palabras seguidas:
Primera segunda tercera
Creo que el problema es al crear el DOM, justo en li_items.push , no debe colocar el elemento secundario agregado dentro de .push , porque devolverá DocumentFragment .
for (var i = 0 ; i < items.length; i++) { let li = document.createElement('li'); let text = document.createTextNode(items[i].innerHTML); li.appendChild(text) li_items.push(li); }El problema es que cuando escribes:
li_items.push(li.appendChild(text)); está enviando a la matriz li_items el valor de retorno de la appendChild(text) .
De los documentos appendChild() :
Valor de retorno
Un nodo que es el elemento secundario adjunto (un elemento secundario), excepto cuando un elemento secundario es un Fragmento de documento, en cuyo caso se devuelve el Fragmento de documento vacío.
Entonces, lo que realmente está empujando a la matriz (y luego insertando nuevamente dentro de <ul> ) no es todo el elemento <li> sino solo el textNode de texto.
Simplemente cambie su ciclo a:
for (var i = 0 ; i < items.length; i++) { let li = document.createElement('li'); li.innerHTML = items[i].innerHTML; li_items.push(li); }