Как через цикл вложить элементы DOM один в другой?

Question

[t256e]

я чет туплю и не могу понять как это сделать?


то есть нужно чтоб внутри .main лежал div, внутри которого был p, внутри которого был span. У меня сейчас все на одном ровне получается

Answer 1

[RAX7]

var arr = ['div', 'p', 'span'];
var main = document.querySelector('.main');

for (let i = 0, container = main; i < arr.length; i++) {
  let el = document.createElement(arr[i]);
  container.append(el);
  container = el;
}

Answer 2

[0xD34F]

Собираем и вставляем разметку:

// заменяем содержимое элемента main
main.innerHTML = arr.reduceRight(
  (content, tag) => `<${tag}>${content}</${tag}>`,
  ''
);

// или, дополняем его
main.insertAdjacentHTML(
  'beforeend',
  (function next(i, tag = arr[i] ?? '') {
    return tag && `<${tag}>${next(-~i)}</${tag}>`;
  })(0)
);

Или создаём элементы напрямую:

// замена контента
main.replaceChildren(...arr.reduceRight((content, tag) => {
  const el = document.createElement(tag);
  el.append(...content);
  return [ el ];
}, []));

// или, добавление
arr.reduce((el, tag) => (
  el.appendChild(document.createElement(tag)),
  el.lastChild
), main);

Answer 3

[Сергей Соколов]

Можно изнутри наружу идти:
создавать очередной элемент и вкладывать в него предыдущий.