JS закрывает Html тег DIV

Question

Оборачиваю массив в Html тег назначая его переменной inputFieldB, но он в этой переменной сразу закрывается. Как предотвратить закрытие тега в переменной inputFieldB а закрывать в переменной inputFieldE.

///Открытие тега   
let inputFieldB = `<div class = "row" id = "${parameter.id}" style = "display:none;">`;

        specifications.insertAdjacentHTML('beforeend', inputFieldB);


///Массив начало
      parameter.attributes.forEach(atr => {



        if (atr.type === "free") typeElement = 'input';
        if (atr.type === "real") typeElement = 'input';
        if (atr.type === "singleselect") typeElement = 'select';
        if (atr.type === "multiselect") typeElement = 'select';

        const element = document.createElement(typeElement);
        element.id = atr.id;

        if (atr.type === 'input') element.type = "free";

        if (atr.type === 'input') element.type = "real";

        let selElement = document.createElement('span');


        if (atr.options.length > 0 && atr.type === 'singleselect') {
          atr.options.forEach(opt => {
            element.insertAdjacentHTML("beforeend", `<option value = "${opt.id}">${opt.name_rus}</option>`);
          })
        }

        if (atr.options.length > 0 && atr.type === 'multiselect') {
          element.multiple="multiple";
          atr.options.forEach(opt => {
            element.insertAdjacentHTML("beforeend", `<option value = "${opt.id}">${opt.name_rus}</option>`);
          })
        }



        let inputField =
        `
        <div class = "row">
        <span  class="col-md-2">${atr.name_rus}: </span>
        ${element.outerHTML}&nbsp;${selElement.outerHTML}
        </div>
        `;
        specifications.insertAdjacentHTML('beforeend', inputField);



      });
      
///Массив конец

        let inputFieldE = `</div>`;

        specifications.insertAdjacentHTML('beforeend', inputFieldE);
        
///Закрытие тега

Answer 1

Можно создавать элемент методом createElement(), а вставлять его в specifications с помощью outerHTML.

Применять такой подход, мне кажется, эффективнее, чем бороться с автозакрытием тега.

let inputFieldB = document.createElement("div");
inputFieldB.style.display = "none";
inputFieldB.classList.add("row");
inputFieldB.id = parameter.id;



///Массив начало
      parameter.attributes.forEach(atr => {



        if (atr.type === "free") typeElement = 'input';
        if (atr.type === "real") typeElement = 'input';
        if (atr.type === "singleselect") typeElement = 'select';
        if (atr.type === "multiselect") typeElement = 'select';

        const element = document.createElement(typeElement);
        element.id = atr.id;

        if (atr.type === 'input') element.type = "free";

        if (atr.type === 'input') element.type = "real";

        let selElement = document.createElement('span');


        if (atr.options.length > 0 && atr.type === 'singleselect') {
          atr.options.forEach(opt => {
            element.insertAdjacentHTML("beforeend", `<option value = "${opt.id}">${opt.name_rus}</option>`);
          })
        }

        if (atr.options.length > 0 && atr.type === 'multiselect') {
          element.multiple="multiple";
          atr.options.forEach(opt => {
            element.insertAdjacentHTML("beforeend", `<option value = "${opt.id}">${opt.name_rus}</option>`);
          })
        }



        let inputField =
        `
        <div class = "row">
        <span  class="col-md-2">${atr.name_rus}: </span>
        ${element.outerHTML}&nbsp;${selElement.outerHTML}
        </div>
        `;
        inputFieldB.insertAdjacentHTML('beforeend', inputField);



      });
      
///Массив конец


specifications.insertAdjacentHTML('beforeend', inputFieldB.outerHTML);

Answer 2

.insertAdjacentHTML добавляет HTML, а не просто строку. Соответственно при разборе первой строки

let inputFieldB = `<div class = "row" id = "${parameter.id}" style = "display:none;">`

браузер перед вставкой разберет строку и добавит недостающий закрывающие теги.

В данном случае, проще собрать одну большую строку и вставить ее в specification за один раз.

Либо отказаться от .insertAdjacentHTML в пользу работы с непосредственно элементами и добавлять их с помощью метода .appendChild

Например так:

///Открытие тега   
let inputFieldB = `
<div class = "row" id = "${parameter.id}" style = "display:none;">${
    ///Массив начало
    parameter.attributes.map(atr => {
        if (atr.type === "free") typeElement = 'input';
        if (atr.type === "real") typeElement = 'input';
        if (atr.type === "singleselect") typeElement = 'select';
        if (atr.type === "multiselect") typeElement = 'select';

        const element = document.createElement(typeElement);
        element.id = atr.id;

        if (atr.type === 'input') element.type = "free";

        if (atr.type === 'input') element.type = "real";

        let selElement = document.createElement('span');
    
        if (atr.options.length > 0 && atr.type === 'singleselect') {
            atr.options.forEach(opt => {
                element.insertAdjacentHTML("beforeend", `<option value = "${opt.id}">${opt.name_rus}</option>`);
        })
    }

        if (atr.options.length > 0 && atr.type === 'multiselect') {
            element.multiple="multiple";
            atr.options.forEach(opt => {
                element.insertAdjacentHTML("beforeend", `<option value = "${opt.id}">${opt.name_rus}</option>`);
        })
    }
        let inputField =
            `
            <div class = "row">
                <span  class="col-md-2">${atr.name_rus}: </span>
                ${element.outerHTML}&nbsp;${selElement.outerHTML}
            </div>
            `;
        return inputField;
    }).join('')
}      
</div>`;

specifications.insertAdjacentHTML('beforeend', inputFieldB);
        
///Закрытие тега

БЛОГ НА HUSL

JS закрывает Html тег DIV

Ответы (2 шт):