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

Чтобы добавить элемент внутрь другого элемента в DOM, можно использовать несколько методов. Самый распространённый - appendChild(). Он добавляет переданный узел в конец списка дочерних элементов выбранного родителя.

Пример:

JAVASCRIPT
const parent = document.getElementById('parent');
const newElement = document.createElement('div');
newElement.textContent = 'Новый элемент';
parent.appendChild(newElement);

Если нужно вставить элемент в определённую позицию (не в конец), используйте insertBefore():

JAVASCRIPT
const referenceNode = document.querySelector('.reference');
parent.insertBefore(newElement, referenceNode); // вставит перед referenceNode

Современный метод append() позволяет добавлять несколько узлов или строк сразу:

JAVASCRIPT
parent.append(newElement, 'Текстовый узел');

Для вставки в начало используйте prepend():

JAVASCRIPT
parent.prepend(newElement);

Также можно менять содержимое через innerHTML, но это менее безопасно (риск XSS) и перезаписывает всё содержимое:

JAVASCRIPT
parent.innerHTML = '<div>Новый элемент</div>';

Выбор метода зависит от задачи: appendChild и insertBefore - классика, append/prepend - удобнее для множественных вставок.