Estoy tratando de dar un botón dentro de toda mi clase .why-text. Los seleccioné por document.querySelectorAll('.why-text'); Y use el bucle "for" para agregar el botón a toda la clase. Pero no funciona. Este es mi código:
var btnAddCart = document.createElement("button"); btnAddCart.innerHTML = "Add"; var WhyTxt = document.querySelectorAll('.why-text'); for (let i = 0; i < WhyTxt.length; i++) { WhyTxt[i].appendChild(btnAddCart); }Crea solo un botón, luego sigue agregando ese mismo botón a n ubicaciones, por lo que termina en la última de ellas. Agregar un elemento que ya está en el DOM mueve efectivamente ese elemento.
Debe crear el botón en el ciclo para tener botones individuales:
const WhyTxt = document.querySelectorAll('.why-text'); for (let i = 0; i < WhyTxt.length; i++) { const btnAddCart = document.createElement("button"); btnAddCart.textContent = "Add"; WhyTxt[i].appendChild(btnAddCart); }Dicho esto, su código también se puede simplificar mucho:
for (let el of document.querySelectorAll(".why-text")) { el.append(Object.assign(document.createElement("button"),{textContent:"Add"})); }Tienes que crear el elemento cada vez, dentro del ciclo. Podría hacerse fuera del bucle y clonarse dentro de él, pero solo está creando un elemento en la estructura actual, por lo que solo se puede agregar una vez.
Este fragmento de trabajo utiliza el enfoque simple de crear un nuevo elemento de botón dentro de cada bucle de la colección principal.
var WhyTxt = document.querySelectorAll('.why-text'); console.log(WhyTxt.length); for (let i = 0; i < WhyTxt.length; i++) { var btnAddCart = document.createElement("button"); btnAddCart.innerHTML = "Add"; WhyTxt[i].appendChild(btnAddCart); } div { height: 2em; background: yellow; } <div class="why-text"></div><br> <div class="why-text"></div><br> <div class="why-text"></div><br> <div class="why-text"></div><br> <div class="why-text"></div><br>