Как добавить элемент в документ внутри другого элемента в DOM

Что проверяют

Знаете ли вы современный набор методов вставки, чем они различаются и почему innerHTML += плохая идея. Следом просят вставить сотню элементов без лишних перерисовок или спрашивают, откуда тут берётся XSS.

Как отвечать

Сначала создание: document.createElement('li'), текст через textContent, классы через classList.add(), атрибуты через свойства или setAttribute(). Затем способы вставки:

• append(...nodes): в конец родителя, принимает сразу несколько узлов и строки, ничего не возвращает;
• appendChild(node): старый метод, ровно один узел, возвращает его, строки не принимает;
• prepend, before, after, replaceWith: в начало родителя, перед элементом, после него, вместо него;
• insertBefore(node, ref): классика, при ref === null работает как вставка в конец;
• insertAdjacentHTML(position, html): позиции beforebegin, afterbegin, beforeend, afterend. Парсит только новый кусок и не трогает существующих детей.

Два факта, которые стоит назвать самим. Вставка узла, который уже есть в DOM, его перемещает, а не копирует, для копии нужен cloneNode(true). Для большого числа элементов собирают их в DocumentFragment или передают одним вызовом append(...items), а повторяющуюся разметку берут из <template> через template.content.cloneNode(true). Браузер пересчитает раскладку один раз, если между вставками вы не читаете offsetHeight и похожие свойства.

И про фреймворки: в React или Vue руками в DOM не лезут, фреймворк перезапишет изменения при следующем рендере. Для вставки в другое место страницы есть createPortal.

Где спотыкаются

Пишут innerHTML += в цикле. Каждый проход заново парсит и пересоздаёт всех детей, теряются обработчики событий, фокус и введённый в поля текст.

Подставляют пользовательский ввод через innerHTML или insertAdjacentHTML. Это прямой путь к XSS, для текста есть textContent.

Ищут родителя до того, как он появился: скрипт в <head> без defer получает null и падает на вызове append. Или ждут, что appendChild одного узла в два контейнера создаст две копии, а он просто переедет во второй.