Как через цикл вложить элементы 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.innerHTML = arr.reduceRight((acc, n) => `<${n}>${acc}</${n}>`, '');

Answer 3

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

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