Interesado en saber si alguien puede ayudar a describir las partes internas del comportamiento que estoy viendo.
Esencialmente, cuando se crea un nuevo elemento dom (luego se almacena en una const), este elemento no se puede agregar ni anteponer al mismo elemento principal.
Ejemplo:
const ul = document.querySelector('ul'); const button = document.querySelector('button'); button.addEventListener('click', () => { const li = document.createElement('li'); li.textContent = 'new li'; ul.prepend(li); ul.append(li); }); Parece la última llamada para append o prepend , tenga en cuenta que si llama anteponer al final, el nuevo elemento solo se agrega al inicio de la ul .
Profundizando en esto, parece que la clonación del nodo funciona antes de la subsiguiente llamada de append/prepend .
const li = document.createElement('li'); li.textContent = 'something new to do'; ul.prepend(li); const newLi = li.cloneNode(true); ul.append(newLi);Sin embargo, me interesa saber el funcionamiento interno de esto y por qué parece que no puedes llamar contra el mismo elemento. ¿Alguien puede arrojar alguna luz sobre esto ya que los documentos de Mozilla no parecen arrojar ninguna luz sobre esto?
Violín: https://jsfiddle.net/gf7b0pom
¡Gracias a todos!
Creo que la confusión aquí es quizás su comprensión de lo que se almacena creado y almacenado en la línea const li = document.createElement('li'); . En este caso, li no contiene una plantilla que se pueda usar una y otra vez; cuando usa document.createElement() , está creando una sola instancia de un elemento de su elección . Esa única instancia solo puede estar en un lugar a la vez.
Como analogía, creo que está imaginando que li es algo así como un sello de goma, que se puede usar en cualquier parte de una hoja de papel para hacer un elemento de la lista. En realidad, li es más como una pegatina : solo puede estar en un lugar del papel a la vez. Cuando corres:
ul.prepend(li); ul.append(li); ... es como si pegara la etiqueta adhesiva del elemento de la lista al frente de la lista, luego la despega y la pega al final de la lista. Esta es la razón por la que debe llamar a .cloneNode(true) : esencialmente le brinda una etiqueta adhesiva duplicada para usar en otro lugar.
La razón es realmente simple. Cuando crea un nuevo elemento, crea solo un elemento. En su detector de eventos, primero antepone ese elemento y luego agrega el mismo elemento.
ul.prepend(li); ul.append(li);Entonces el código está haciendo lo que pides. Está moviendo el elemento pero está usando el mismo elemento porque no tiene un segundo elemento.
Por otro lado, desea agregar y anteponer un total de 2 elementos que contienen la misma forma/datos. Entonces necesitas 2 elementos DOM para eso. Si también clonas un elemento, también puedes usarlo una vez. Entonces, si desea agregar ese elemento a varios lugares, cada vez que necesite clonar, luego agregue.