Выбор ответа Middle DOM на практике обновлено
Что плохого в innerHTML +=
Вопрос
Что не так с этим кодом, кроме риска XSS?
for (const item of items) {
list.innerHTML += `<li><input value="${item.title}"></li>`;
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Каждая итерация пересобирает всё содержимое: работа растёт как N², слушатели теряются. innerHTML += это чтение всей разметки, склейка и полная пересборка детей.
Варианты ответа
innerHTMLнельзя использовать у<ul>: браузер молча игнорирует такую запись- Каждая итерация пересобирает всё содержимое: работа растёт как N², слушатели теряютсяправильный ответ
- Шаблонные строки не поддерживаются в
innerHTML, и${}попадёт в разметку как текст - Элементы добавятся в обратном порядке, потому что
+=вставляет строку в начало
Разбор
innerHTML += это чтение всей разметки, склейка и полная пересборка детей. На N элементах работа растёт как N², а старые узлы заменяются новыми: слушатели, повешенные на них, и текущий ввод пропадают. Правильно собрать узлы в DocumentFragment и вставить разом. У <ul> innerHTML работает. Шаблонная строка это обычная строка. Порядок сохраняется.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.