innerHTML множественные вставки в проблемах с div и автозаполнением

Question

Хорошо, я пытаюсь вставить выбор в селектор опций, который должен изменять количество динамически генерируемых опций выбора в зависимости от результата запроса;

Моя проблемаявляется: я не могу правильно соединить строки с innerHTML и + =, потому что код будет автоматически завершаться с <./ select> и <./ div> в конце, как я могу избежать этого и правильно согласовать код?

Вот отрывок из инкриминированной функции:

function addOption(camereDisponibili,foto,tipo,prezzo,specifiche){
    //controllo e se il numero di camere disponibili e' 0, non inserisco nulla.
    var div = document.createElement('div');
    div.className = 'room';

    var part1 = document.createElement('div');
    part1.className = 'part1';
    part1.innerHTML = '<div class = "roomImage" style = "background-image: url(https://static.lodgeic.com/res/images/thew14umb/rooms/single/single-room-1.jpg)" ></div>';
    //qua ci va l'immagine
    div.appendChild(part1);

    var part2 = document.createElement('div');
    part2.className = 'part2';
    part2.innerHTML = '<div class= tipo>'+tipo+'</div><div class= prezzo> €'+prezzo+'</div><div class= descrizione>'+specifiche+'</div>';//qua va nome, prezzo e descrizione
    div.appendChild(part2);

    var roomSelect = document.createElement('div');//selettore numero camere da prenotare OK

    roomSelect.innerHTML += '<div class = selectionWrap>';
    roomSelect.innerHTML += '<select name="numCamere" id="numCamere" onChange = "loadValue(this, 1)" class = selection>';

    for(var ciclo = 0;ciclo<camereDisponibili;ciclo++){
        roomSelect.innerHTML += '<option value="'+ciclo+'" selected>'+ciclo+' Rooms</option>';
    }

    roomSelect.innerHTML += '</select></div>';// qua vanno il numero di camere e le opzioni
    
    part2.appendChild(roomSelect);
    
    document.getElementById("roomWrapper").appendChild(div);
}

И более полного кода для выполнения некоторых тестовых прогонов:

var numCamere = 1;
var numAdulti = 2;
var numBambini = 0;
var arrival;
var departure;
var NUM_OPZIONI = 30;
var foto= '1';
var tipo = 'Singol Room BB - Prepaid'; 
var prezzo = '56';    var specifiche = 'Non-Smoker Room';
var camereDisponibili = 3;

addOption(camereDisponibili,foto,tipo,prezzo,specifiche);

function addOption(camereDisponibili,foto,tipo,prezzo,specifiche){
    //controllo e se il numero di camere disponibili e' 0, non inserisco nulla.
    var div = document.createElement('div');
    div.className = 'room';

    var part1 = document.createElement('div');
    part1.className = 'part1';
    part1.innerHTML = '<div class = "roomImage" style = "background-image: url(https://static.lodgeic.com/res/images/thew14umb/rooms/single/single-room-1.jpg)" ></div>';
    //qua ci va l'immagine
    div.appendChild(part1);

    var part2 = document.createElement('div');
    part2.className = 'part2';
    part2.innerHTML = '<div class= tipo>'+tipo+'</div><div class= prezzo> €'+prezzo+'</div><div class= descrizione>'+specifiche+'</div>';//qua va nome, prezzo e descrizione
    div.appendChild(part2);

    var roomSelect = document.createElement('div');//selettore numero camere da prenotare OK

    roomSelect.innerHTML += '<div class = selectionWrap>';
    roomSelect.innerHTML += '<select name="numCamere" id="numCamere" onChange = "loadValue(this, 1)" class = selection>';

    for(var ciclo = 0;ciclo<camereDisponibili;ciclo++){
        roomSelect.innerHTML += '<option value="'+ciclo+'" selected>'+ciclo+' Rooms</option>';
    }

    roomSelect.innerHTML += '</select></div>';// qua vanno il numero di camere e le opzioni
    
    part2.appendChild(roomSelect);
    
    document.getElementById("roomWrapper").appendChild(div);
}

function loadValue(selectObject, int) {//vulnerabile a corruzione della memoria locale o di sessione
    switch(int){
        case 1:
            numCamere = selectObject.value;
            localStorage.setItem('numCamere', numCamere);
        break;

        case 2:
            numAdulti = selectObject.value;
            localStorage.setItem('numAdulti', numAdulti);
        break;

        case 3:
            numBambini = selectObject.value;
            localStorage.setItem('numBambini', numBambini);
        break;
    }
}

   .roomWrapper{
        width: 100%;
        position: relative;
        top: 160px;
        margin: 0px;
    }
    
    .room{
        font-family: 'Montserrat', sans-serif;
        border-color: gold;
        border-style: solid;
        border-width: 4px;
        width: 90%;
        max-width: 1500px;
        height: 170px;
        background-color: rgba(255, 255, 255, 0.9);
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 40px;
        display: block;
        overflow: hidden;
    }
    
    .roomImage{
        background-position: center top;
        background-size: cover;
        background-repeat: no-repeat;
        border-color: black;
        border-width: 1px;
        border-style: solid;
        width: 130px;
        height: 130px;
        resize: both;
        position: relative;
        top: 18px;
        margin: auto;
    }
    
    .part1{
        width: 15%;
        float: left;
        min-width: 150px;
        height: 100%;
    }
    
    .part2{
        width: 75%;
        float: left;
        font-weight: 600;
        color: limegreen;
        height: 100%;
    }
    
    .tipo{
        font-size: 28px;
        text-align: left;
        width: 84%;
        float: left;
        padding: 1%;
    }
    
    .prezzo{
        font-size: 30px;
        text-align: right;
        width: 12%;
        float: left;
        padding: 1%;
    }
    
    .descrizione{
        color: dodgerblue;
        font-size: 20px;
        padding: 1%;
        width: 100%;
        display: block;
    }

    .selectionWrap{
        width: 100%;
    }
    
    .selection{
        float: left;
        font-weight: 500;
        font-family: 'Montserrat', serif;
        width: 47.5%;
        max-width: 160px;
        height: 34px;
        position: relative;
        left: 6px;
        border-radius: 4px;
        background-color: rgba(255, 255, 255, 0.8);
        cursor: pointer;
    }

<h1>Choose Your Rooms!</h1>

        <div class = roomWrapper id= roomWrapper>
            
        </div>

PS: слова, которые вы, возможно, не понимаете, скорее всего, итальянские, если вы хотите перевести это, чтобы иметь некоторую дополнительную информацию о том, что происходит ...

Answer 1

Вы можете сначала объединить строки, а затем использовать innerHTML, например:

 function addOption(camereDisponibili,foto,tipo,prezzo,specifiche){
        //controllo e se il numero di camere disponibili e' 0, non inserisco nulla.
        var div = document.createElement('div');
        div.className = 'room';

        var part1 = document.createElement('div');
        part1.className = 'part1';
        part1.innerHTML = '<div class = "roomImage" style = "background-image: url(https://static.lodgeic.com/res/images/thew14umb/rooms/single/single-room-1.jpg)" ></div>';
        //qua ci va l'immagine
        div.appendChild(part1);

        var part2 = document.createElement('div');
        part2.className = 'part2';
        part2.innerHTML = '<div class= tipo>'+tipo+'</div><div class= prezzo> €'+prezzo+'</div><div class= descrizione>'+specifiche+'</div>';//qua va nome, prezzo e descrizione
        div.appendChild(part2);

        var roomSelect = document.createElement('div');//selettore numero camere da prenotare OK

        var roomSelectHTML = '<div class = selectionWrap>';
        roomSelectHTML  += '<select name="numCamere" id="numCamere" onChange = "loadValue(this, 1)" class = selection>';

        for(var ciclo = 0;ciclo<camereDisponibili;ciclo++){
            roomSelectHTML  += '<option value="'+ciclo+'" selected>'+ciclo+' Rooms</option>';
        }

        roomSelectHTML  += '</select></div>';// qua vanno il numero di camere e le opzioni

        roomSelect.innerHTML += roomSelectHTML;

        part2.appendChild(roomSelect);

        document.getElementById("roomWrapper").appendChild(div);
    }