Quiero agregar divs usando JavaScript en parentDiv. Ya he creado algunos divs en mi archivo index.html. Quiero que el div que crearé se agregue antes que otros divs que creé en html en el mismo parentDiv. No quiero eliminar otros divs. Intenté usar appendChild pero eso se agrega al final. Espero que tenga sentido.
function displayBox(data) { let html = ""; data.forEach((box) => { const box = document.createElement("div"); box.classList.add("box"); html = ` <a target="_blank" href="${box.link}" class="image fit" ><img src="${box.img}" alt="${box.name}" /></a> <div class="inner"> <h3>${box.name} (${box.country})</h3> <a target="_blank" href="${box.link}" class="button open-link fit" >Visit</a > </div> `; box.innerHTML = html; thumbnails.appendChild(box); }); }thumbnails es mi parentDiv donde quiero agregar divs llamado cuadro
Si desea agregar elementos al frente, puede usar anteponer.
var data = [1,2,3]; var out = document.querySelector("#out"); data.forEach(function (x) { var div = document.createElement("div"); div.textContent = x; out.prepend(div); }); <div id="out"> <div>Orginal</div> </div>Si no desea estar en orden inverso, puede realizar un bucle inverso o cambiar el código para usar before() con el primer elemento en el padre.
var data = [1,2,3]; var out = document.querySelector("#out"); const first = out.children[0]; data.forEach(function (x) { var div = document.createElement("div"); div.textContent = x; first.before(div); }); <div id="out"> <div>Orginal</div> </div>Resolvió el problema de esta manera. Gracias epascarello
function displayBox(data) { data = data.reverse(); let html = ""; data.forEach((box) => { const box = document.createElement("div"); box.classList.add("box"); html = ` <a target="_blank" href="${box.link}" class="image fit" ><img src="${box.img}" alt="${box.name}" /></a> <div class="inner"> <h3>${box.name} (${box.country})</h3> <a target="_blank" href="${box.link}" class="button open-link fit" >Visit</a > </div> `; box.innerHTML = html; thumbnails.prepend(box); }); }