0
114
VisualizaçõesJavascript 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 Respostas
Responde à pergunta0
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