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

Stato
Discussione chiusa ad ulteriori risposte.

Gabbanis

Nuovo Utente
31
1
salve io ho questo codice html con inerente bootstrap per la creazione di un div
HTML:
                <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
 
Ultima modifica da un moderatore:

_Achille

Utente Èlite
3,029
700
CPU
Intel i5-6600K @4.6 GHz
Dissipatore
Cryorig H5
Scheda Madre
ASRock Z170 Extreme 6
Hard Disk
WesternDigital 1TB & Crucial MX200 250GB
RAM
Corsair Ven 16GB DDR4 2133MHz
Scheda Video
Sapphire RX 580 Nitro+
Monitor
Dell S2418H
Alimentatore
RM550X
Case
NZXT S340
Periferiche
Cooler Master XT; Razer Abyssus
Sistema Operativo
Windows 10 Pro
Usa il tag code
 

Gabbanis

Nuovo Utente
31
1
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
 

Gabbanis

Nuovo Utente
31
1
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">'
Post automaticamente unito:

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

cdtux

Utente Èlite
1,718
756
CPU
I7 3770
Scheda Madre
Asrock Z77 Extreme 4
Hard Disk
Samsung 850 pro 250GB
RAM
Corsair Vengeance LP 16GB
Scheda Video
EVGA GTX670 SC
Monitor
Dell U2412M
Alimentatore
Corsair TX850M
Case
Corsair Graphite 760T
Sistema Operativo
Debian / Kali Linux / Win
  • Mi piace
Reactions: Moffetta88

Mursey

Moderatore
Staff Forum
3,564
1,611
mi puoi fare un esempio più significativo perché non riesco a capire

Va bene, partiamo da un HTML
HTML:
<div id="parent"></div>
e da un CSS
CSS:
.sfondo {
  background-color: red;
}
C'è il modo grezzo:
JavaScript:
var newElement = '<span class="sfondo">Ciao!</span>';
document.getElementById('parent').innerHTML = newElement;
Ma di difficile gestione e manutenzione...

Oppure usando la createElement:
JavaScript:
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.
 
  • Mi piace
Reactions: cdtux

cdtux

Utente Èlite
1,718
756
CPU
I7 3770
Scheda Madre
Asrock Z77 Extreme 4
Hard Disk
Samsung 850 pro 250GB
RAM
Corsair Vengeance LP 16GB
Scheda Video
EVGA GTX670 SC
Monitor
Dell U2412M
Alimentatore
Corsair TX850M
Case
Corsair Graphite 760T
Sistema Operativo
Debian / Kali Linux / Win
Nel link c'è già un esempio.
Comunque sia con appendChild:
JavaScript:
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:
JavaScript:
parent.innerHTML += `<div class="destination"><div>innerHTML</div></div>`;
Ovviamente con entrambi i metodi puoi fare cicli:
JavaScript:
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);
}
 
  • Mi piace
Reactions: Moffetta88 e Mursey
Stato
Discussione chiusa ad ulteriori risposte.

Entra

oppure Accedi utilizzando