Quiero cambiar el diseño de una página que tiene 3 columnas:
<div> <div class="container"> <div class="row" > <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div> </div> </div>... a 4 columnas cuando se hace clic en un botón:
<div> <div class="container"> <div class="row" > <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> <div class="col-md-3"></div> </div> </div> </div>No tengo ni idea de cómo hacer esto.
Hay muchas maneras de agregar otro div. Aquí está mi enfoque:
function appendDiv(){ let row = document.getElementsByClassName('row'); // change className for all the col-md-4 div document.querySelectorAll('.col-md-4').forEach(function(item) { item.className = 'col-md-3'; }) //create new div; let col = document.createElement('div'); // add classname to div col.className = "col-md-3" row[0].appendChild(col) } .col-md-4{ border : 1px solid blue; height : 20px; } .col-md-3{ border : 1px solid green; height : 20px; } <div> <div class="container"> <div class="row" > <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div> <button onClick='appendDiv()'>click</button> </div> </div>Hay algunas maneras en que esto se puede hacer dependiendo de sus datos, sin embargo, aquí hay un ángulo.
Si tiene las versiones de 4 columnas y 3 columnas de los datos cargados en la página (pero una oculta con css). Podrías ejecutar algo como esto.
HTML
<div id="colsThree" class="displayArea show"> <div class="container"> <div class="row" > <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div> </div> </div> <div id="colsFour" class="displayArea"> <div class="container"> <div class="row" > <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div> </div> </div> <button id="changeColumns">Click Me To Change Columns</button>JavaScript
const buttonEl = document.querySelector("#changeColumns"); buttonEl.addEventListener('click', () => { const outputEls = document.querySelectorAll('.displayArea') outputEls.forEach((outputEl) => { outputEl.toggle("show") }) });CSS
.displayArea { display: none; } .displayArea.show { display: block; }Utilice el método forEach y appendChild .
const btn = document.querySelector('#btn') btn.onclick = function() { const targetClasses = document.querySelectorAll('.col-md-4') targetClasses.forEach((tag, idx) => { tag.className = 'col-md-3' const lastIdx = targetClasses.length - 1 if (idx === lastIdx) { const tag = document.createElement('div') , row = document.querySelector('.row') tag.className = 'col-md-3' tag.innerText = '4' row.appendChild(tag) } }) console.log(targetClasses) return } <div> <button id="btn">Click me</button> <div class="container"> <div class="row" > <div class="col-md-4">1</div> <div class="col-md-4">2</div> <div class="col-md-4">3</div> </div> </div> </div>