Diseño de cuadrícula CSS:
.wrapper { display: grid; grid-template-areas: "btn1 btn2 btn3 btn4"; grid-template-columns: repeat(4, 1fr); } #btn {grid-area: "btn1"} #btn2 {grid-area: "btn2"} #btn3 {grid-area: "btn3"} #btn4 {grid-area: "btn4"}creado por div y botón:
const div = document.createElement("div"); div.classList.add("wrapper"); const body = document.body; body.appendChild(div); const button = document.createElement("button"); button.textContent = "Click1"; button.setAttribute("id", "btn");A continuación, quiero crear tres botones más basados en el primero y pegarlos en sus respectivas áreas. Si describe estúpidamente cada acción:
const b2= button.cloneNode(true); const b3= button.cloneNode(true); const b4= button.cloneNode(true); b2.setAttribute('id', 'btn2'); b3.setAttribute('id', 'btn3'); b4.setAttribute('id', 'btn4'); b2.textContent = "Click"+2; b3.textContent = "Click"+3; b4.textContent = "Click"+4; div.appendChild(button); div.appendChild(b2); div.appendChild(b3); div.appendChild(b4);¿Cómo hacerlo de manera óptima? Algo como esto (no funciona):
let b2, b3, b4; let arr = [b2,b3,b4] let i=2; while(i<5){ for(let j=0; j<arr.length; j++){ arr[j].setAttribute('id', 'btn'+ i); arr[j].textContent= "Click"+i; div.appendChild(arr[j]) } i++}El uso insertAdjacentHTML simplifica la tarea. En este fragmento, el div y los botones se crean de una sola vez:
let buttons = [...Array(4)].map( (_, i) => `<button id=btn${i + 1}>Click ${i + 1}</button>`); document.body.insertAdjacentHTML( `beforeend`, `<div id="buttons">${ buttons.join(``)}</div>`); button {margin-right: 3px;} #buttons { border: 1px solid #ddd; padding: 0.3rem; width: 50vw; text-align: center; }No hay necesidad de repetir, o de clone , solo un solo bucle for . Aquí usando un documentFragment para evitar múltiples inserciones en el DOM.
const div = document.createElement('div'); div.classList.add('wrapper'); document.body.appendChild(div); const buttonCount = 4 const buttonFragment = document.createDocumentFragment(); for (let i = 1; i <= buttonCount; i++) { const button = document.createElement('button'); button.textContent = `Click${i}`; button.id = `btn${i}`; buttonFragment.append(button); } div.append(buttonFragment); .wrapper {display: grid; grid-template-areas: "btn1 btn2 btn3 btn4"; grid-template-columns: repeat(4, 1fr);} #btn1 {grid-area: "btn1"; background-color: pink;} #btn2 {grid-area: "btn2"; background-color: aquamarine;} #btn3 {grid-area: "btn3"; background-color: gray;} #btn4 {grid-area: "btn4"; background-color: salmon;}