RISOLTO Problema nella creazione div (html, javascript, bootstrap)

[Gabbanis]

salve io ho questo codice html con inerente bootstrap per la creazione di un div

                <div class="col-sm col-md-6 col-lg ftco-animate">
                    <div class="destination">
                        <a href="#" class="img img-2 d-flex justify-content-center align-items-center" style="background-image:                     url(images/Bondone/bondone-2.jpg);">
                            <div class="icon d-flex justify-content-center align-items-center">
                                <span class="icon-search2"></span>
                            </div>
                        </a>
                        <div class="text p-3">
                            <div class="d-flex">
                                <div class="one">
                                    <h3><a href="#">Hotel, Italy</a></h3>
                                    <p class="rate">
                                        <i class="icon-star"></i>
                                        <i class="icon-star"></i>
                                        <i class="icon-star"></i>
                                        <i class="icon-star"></i>
                                        <i class="icon-star-o"></i>
                                        <span>8 Rating</span>
                                    </p>
                                </div>
                                <div class="two">
                                    <span class="price per-price">$40<br><small>/night</small></span>
                                </div>
                            </div>
                            <p>Far far away, behind the word mountains, far from the countries</p>
                            <hr>
                            <p class="bottom-area d-flex">
                                <span><i class="icon-map-o"></i> Miami, Fl</span>
                                <span class="ml-auto"><a href="#">Book Now</a></span>
                            </p>
                        </div>
                    </div>
                </div>

qualcuno mi sa consigliare una parte di codice javascript per crearlo a ripetizione senza metterlo continuamente a mano dentro alla pagina html? grazie in anticipo

 

[_Achille]

Usa il tag code

 

[Gabbanis]

In che senso? Perché io ad esempio ho un database a parte creato con Javascript e al posto di background-image url(images/Bondone/bondone-2.jpg);">
Al posto di bondone ci dovrei mettere per esempio il collegamento ad una cartella dove sono contenute altre directory con all interno le immagini

 

[Mursey]

codice javascript per crearlo

Leggi qui.
Invece per il discorso tag code, sta facendo riferimento al regolamento di sezione ...che andrebbe letto.

 

[Gabbanis]

Leggi qui.
Invece per il discorso tag code, sta facendo riferimento al regolamento di sezione ...che andrebbe letto.

Cioè io per ogni elemento di quel div dovrò creare ogni volta un elemento. Per esempio :


var div = document.createElement("<div class="col-sm col-md-6 col-lg ftco-animate">");

Poi :
var divdiv = document.createElement("<div class="destination">);

Oppure posso aggiungerlo all elemento già creato così
div+='<div class="destination">'
--- i due messaggi sono stati uniti ---
Oppure mi puoi fare un esempio più significativo perché non riesco a capire al massimo

 

[cdtux]

Puoi utilizzare il metodo appendChild

 

[Gabbanis]

Saresti così gentile da farmi qualche esempio?

 

[Mursey]

mi puoi fare un esempio più significativo perché non riesco a capire

---

Va bene, partiamo da un HTML

<div id="parent"></div>

e da un CSS

.sfondo {
  background-color: red;
}

C'è il modo grezzo:

var newElement = '<span class="sfondo">Ciao!</span>';
document.getElementById('parent').innerHTML = newElement;

Ma di difficile gestione e manutenzione...

Oppure usando la createElement:

var newElement = document.createElement('span');
newElement.classList.add("sfondo");
newElement.innerHTML = 'Ciao!';
document.getElementById('parent').appendChild(newElement);

---

Questo è solo un esempio per spiegare il concetto.
Nel tuo caso sono numerosi DIV uno all'interno dell'altro, consiglio di spezzare la creazione in piccole fasi per rendere più gestibile il tutto.

 

[cdtux]

Nel link c'è già un esempio.
Comunque sia con appendChild:

const parent = document.querySelector('div.col-sm.col-md-6.col-lg.ftco-animate');
const destination = document.createElement('div');
destination.setAttribute('class', 'destination');
destination.innerHTML += `<div>....</div>`;
parent.appendChild(destination);

oppure con il classico innerHTML:

parent.innerHTML += `<div class="destination"><div>innerHTML</div></div>`;

Ovviamente con entrambi i metodi puoi fare cicli:

const data = ['a', 'b', 'c', 'd'];
for (const i of data) {
    parent.innerHTML += `<div class="destination"><div>innerHTML ${i}</div></div>`;
}
for (const i of data) {
    const destination = document.createElement('div');
    destination.setAttribute('class', 'destination');
    destination.innerHTML += `<div>appendChild ${i}</div>`;
    parent.appendChild(destination);
}