¡Hola, soy nuevo en el desarrollo web y estoy tratando de practicar creando un sitio pequeño para mi mamá!
Básicamente, tengo este div que quiero replicar varias veces solo cambiando la URL de la imagen y el título h3.
<div class="col-lg-4 mb-5 col-md-6"> <div class="wine_v_1 text-center pb-4"> <a class="thumbnail d-block mb-4"><img src="images/im.jpg" alt="Image" class="img-fluid"></a> <div> <h3 class="heading mb-1"><a href="#">Us</a></h3> </div> </div> </div>Estaba pensando en usar JavaScript para copiar el div como una cadena para que fuera algo así como (pseudocódigo)
for image.length { getelementbyid.print (div1 + imageArray(i) + div2 + caption(i) + endofDiv ) }¿Sería esto posible? ¿Tendría sentido hacerlo de esta manera o hay una manera más simple?
El ejemplo funciona al tener un objeto data , que almacena los subtítulos y las URL de las imágenes. Luego, hay una plantilla de clonación. Recorre cada uno y clona la plantilla, y reemplaza cada elemento con el contenido correcto. Luego lo agrega al HTML con .appendChild .
Puedes escribir una función haciendo este trabajo. Crear copias de su elemento y cambiar los atributos correspondientes a sus nuevos datos.
function copyAndChangeImageAndCaption(){ const images = [ {imageUrl: "images/de.jpg", caption: "De"}, {imageUrl: "images/it.jpg", caption: "It"}, {imageUrl: "images/fr.jpg", caption: "Fr"} ]; images.forEach(image => { const el = document.getElementsByClassName('col-lg-4 mb-5 col-md-6'); let copy = el[0].cloneNode(true) copy.getElementsByClassName('thumbnail')[0].childNodes[0].src=image.imageUrl; copy.getElementsByClassName('heading')[0].childNodes[0].innerHTML = image.caption; document.getElementsByClassName('container')[0].appendChild(copy); }); } <div class='container'> <div class="col-lg-4 mb-5 col-md-6"> <div class="wine_v_1 text-center pb-4"> <a class="thumbnail d-block mb-4"><img src="images/im.jpg" alt="Image" class="img-fluid"></a> <div> <h3 class="heading mb-1"><a href="#">Us</a></h3> </div> </div> </div> </div> <button onClick="copyAndChangeImageAndCaption()">Add images</button>