Присвоение текста в innerHTML у объекта модифицирует сам текст

Question

Код

tmpHTML = `<div class="question toleft">
    <div class="question-body">
        Где котлеты?
    </div>

    <form class="question-answer" id="answer-field-0" data-type="text">
        <input data-type="text" type="text" class="answer-field maximized" placeholder="Ваш ответ">
        <input id="answer-submit-0" type="submit" class="submit-button unactive" value="ААА">
    </form>
</div>`

console.log(tmpHTML);

questions_list_el.innerHTML = tmpHTML;

console.log(questions_list_el.innerHTML);

Что выводит консоль

Первый console.log()

<div class="question toleft">
                <div class="question-body">
                    КОТЛЕТЫ
                </div>

                <form class="question-answer" id="answer-field-0" data-type="text">
                    <input data-type="text" type="text" class="answer-field maximized" placeholder="Ваш ответ">
                    <input id="answer-submit-0" type="submit" class="submit-button unactive" value="Завершить">
                </form>
            </div>

Второй console.log()

<div class="question toleft">
                <div class="question-body">
                    КОТЛЕТЫ
                </div>

                
                    <input data-type="text" type="text" class="answer-field maximized" placeholder="Ваш ответ">
                    <input id="answer-submit-0" type="submit" class="submit-button unactive" value="Завершить">
                
            </div>

Answer 1

Браузер не позволяет создавать вложенные формы, так как это бессмысленно с точки зрения поведения форм. Вы вставляете innerHTML в элемент, который находится внутри тега form или сам является формой. Поэтому браузер вычищает форму из Вашего html-а.

https://www.w3.org/MarkUp/html3/forms.html

There can be several forms in a single document, but the FORM element can't be nested.

БЛОГ НА HUSL

Присвоение текста в innerHTML у объекта модифицирует сам текст

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