0
112
ViewsJavascript For loop agrega el mismo elemento una vez
Esto es para entender la lógica de JS Loop. En el siguiente código, espero que el elemento <li> se agregue 3 veces dentro de la etiqueta <ul> . Entonces debería obtener 3 etiquetas <li> dentro de la etiqueta <ul> . Según tengo entendido, cualquier acción dentro del ciclo funcionará según la condición. Según eso, debería obtener 3 etiquetas <li> en blanco aquí. Pero solo obtengo 1. Cualquiera puede explicar cuál es el problema con mi enfoque y cómo debo escribirlo. ¡Gracias de antemano!
let ul = document.querySelector("ul"); let li = document.createElement("li"); for (i = 0; i <=3; i++) { ul.appendChild(li); }2 answers
Answer question0
Necesitas crear un nuevo elemento cada vez. Si agrega el mismo elemento varias veces, lo moverá en el DOM, pero no lo clonará.
Una solución simple es usarcloneNode :
let node = document.createTextNode("😀") for (i = 0; i <3; i++) document.body.appendChild( node.cloneNode() )Nota:
La clonación de un nodo copia todos sus atributos y sus valores, incluidos los oyentes intrínsecos (en línea). No copia los detectores de eventos agregados usando
0
por qué
appendChild reemplaza el error del elemento propio
soluciones
- crear un nuevo
lidentro del ciclo
const ul = document.createElement("ul"); // li = document.createElement("li"); for (i = 0; i < 3; i++) { const li = document.createElement("li"); // console.log('i =', i, ul); ul.insertAdjacentElement('beforeend', li); } ul; // <ul><li></li><li></li><li></li></ul>- crear todos los niños con cadena DOM
const ul = document.createElement("ul"); let li = ''; for (i = 0; i < 3; i++) { li += '<li></li>'; } ul.insertAdjacentHTML('beforeend', li); ul; // <ul><li></li><li></li><li></li></ul>árbitro
https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement